import React, { useMemo, useState } from 'react';
import { useParams } from 'react-router-dom'
import { Service } from '../Utils/HTTP'
import useAuth from '../Auth/useAuth.js';
import { Box, Paper, Divider, Typography, Button } from '@mui/material'

export function Prueba() {

  let { id } = useParams();
  let auth = useAuth();
  let token = useMemo(() => auth.getToken())
  let [data, setData] = useState({});

  useState(() => {
    let rest = new Service(`/prueba/findid/${id}`)
    rest.get(token)
      .then(resp => setData(resp.data))
      .catch( _e => setData({}))
  }, [id])

  const CreateAssign = () => {
    let now = new Date().toISOString();
    let user = auth.getProfile();
    let body = {
      "id": -1,
      "fechaasignacio": now,
      "fechafinexamen": now, 
      "estado": "1",
      "score" : "0",
      "mensaje" : "0",
      "mensaje2" : "0",
      "idcontrasenia": user.password,
      "nombre": "assing CLEVAERR"
    }
    console.log(body)
  }

  return (
    <div className="content-section">
      <div className="main">
        <Box >
          <Paper className="prueba_body" elevation={1}>
            <h1>{data.nombre}</h1>
            <Divider/>
            <Typography style={{marginTop:15, textAlign: 'center'}}>{data.decription}</Typography>
            <Divider style={{marginTop:15}}/>
            <Button onClick={CreateAssign}>Inicar Prueba</Button>
          </Paper>
        </Box>
      </div>
    </div>
  );
}