import React from 'react'
import {
  Skeleton, Box, IconButton, TableCell, TableContainer,
  Table, TableRow, Paper, TableBody,
  Tooltip,
} from '@mui/material';
import {
  CheckBox as CheckBoxIcon,
  // FmdBad as FmdBadIcon,
  NewReleases as NewReleasesIcon
} from '@mui/icons-material'
import { useNavigate } from 'react-router-dom'

import { Col, Row } from 'react-bootstrap'


const big_as = 70

function Asignaciones(props) {
  let navigate = useNavigate()
  console.log(props)
  let { cattest, calificacionescleaver: test_result, id: SuperPWD } = props.asign;

  return (
    <tr>
      <td>
        {cattest.decription}
        {
          test_result.length > 0 ?
            (
              <Tooltip title="Mostrar resultados">
                <IconButton
                  onClick={() => navigate('/dashboard/resultados/' + SuperPWD)}
                  style={{ color: '#0bd641' }}
                  aria-label="puesto_status"
                  components="label">
                  <CheckBoxIcon />
                </IconButton>
              </Tooltip>
            ) : null
        }
      </td>
    </tr>
  )
}

function TableUser(props) {
  let { user } = props;
  let { asignaciones, candi } = user

  return (
    <TableRow >
      <TableCell
        style={{ borderRight: '1px solid #f1f1f1 !important' }}
        className="home_letter pwd_user_name ">
        {candi.nombre + " " + candi.apellidos}
      </TableCell>
      <TableCell className="table_list_test_user home_letter">
        <table>
          <tbody >
            {
              asignaciones?.length > 0 ?
                asignaciones.map(a => <Asignaciones key={a.id} asign={a} />)
                : <SinAsignaciones />
            }
          </tbody>
        </table>
      </TableCell>
    </TableRow>
  )
}

function SinAsignaciones() {
  return (
    <tr style={{ padding: 5 }}>
      <td style={{ textAlign: 'center' }} className="home_letter">
        <i> El candidato aun no cuenta con asignaciones... </i>
        {/* <FmdBadIcon style={{ color: 'var(--main)' }} /> */}
      </td>
    </tr>
  )
}

export function Candidato(props) {
  let { password, candidatos } = props.user

  return (
    <div className="data_candidato">
      <Row>
        <Col md="3" sm="12" style={{ padding: 10, borderRight: '1px solid #f1f1f1' }}>
          <p><b>{password?.toUpperCase()}</b></p>
        </Col>
        <Col md="9">
          <TableContainer style={{ boxShadow: "none" }} component={Paper}>
            <Table size="small" aria-label="a dense table">
              <TableBody>
                {
                  candidatos.length > 0 ?
                    candidatos.map(u => <TableUser key={u.candi.id} user={u} />)
                    : <SinAsignRealizadas />

                }
              </TableBody>
            </Table>
          </TableContainer>
        </Col>
      </Row>
    </div>
  )
}

function SinAsignRealizadas() {
  return (
    <tr style={{ padding: 5 }}>
      <td style={{ textAlign: 'center' }} className="home_letter">
        <i> No se ha relizado ninguna asignacion... </i>
        <NewReleasesIcon style={{ color: 'var(--main)' }} />
      </td>
    </tr>
  )
}

export function Preview() {
  return (
    <Box sx={{ width: '100%' }}>
      <Skeleton height={big_as} animation="wave" />
      <Skeleton height={big_as} animation="wave" />
      <Skeleton height={big_as} animation="wave" />
      <Skeleton height={big_as} animation="wave" />
      <Skeleton height={big_as} animation="wave" />
    </Box>
  )
}
