import { FC } from 'react';

import Table from '@material-hu/mui/Table';
import TableCell from '@material-hu/mui/TableCell';
import TableRow from '@material-hu/mui/TableRow';
import Typography from '@material-hu/mui/Typography';

import { useAuth } from 'src/contexts/JWTContext';

export const HiringDateTable: FC = () => {
  const { user } = useAuth();

  const [year, month, day] = user!.hiringDate!.split('-');

  const hiringDateDay = day.padStart(2, '0');
  const hiringDateMonth = month.padStart(2, '0');
  const hiringDateYear = year;

  const headerStyle = {
    py: 0,
    borderBottom: 0,
    textAlign: 'center',
  };

  const infoStyle = {
    py: 0,
    borderLeft: '1px solid #e0e0e0',
    borderRight: '1px solid #e0e0e0',
  };

  const textStyle = {
    fontWeight: 600,
    fontSize: '14px',
  };

  return (
    <Table sx={{ width: 'fit-content' }}>
      <TableRow>
        <TableCell
          colSpan={3}
          sx={{ pb: 0, borderBottom: 0 }}
        >
          <Typography
            color="secondary"
            sx={{
              fontSize: '14px',
              fontWeight: 600,
              textTransform: 'uppercase',
            }}
          >
            Fecha de ingreso
          </Typography>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell sx={headerStyle}>
          <Typography
            color="secondary"
            sx={{ fontSize: '12px' }}
          >
            D
          </Typography>
        </TableCell>
        <TableCell sx={headerStyle}>
          <Typography
            color="secondary"
            sx={{ fontSize: '12px' }}
          >
            M
          </Typography>
        </TableCell>
        <TableCell sx={headerStyle}>
          <Typography
            color="secondary"
            sx={{ fontSize: '12px' }}
          >
            A
          </Typography>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell sx={infoStyle}>
          <Typography sx={textStyle}>{hiringDateDay}</Typography>
        </TableCell>
        <TableCell sx={infoStyle}>
          <Typography sx={textStyle}>{hiringDateMonth}</Typography>
        </TableCell>
        <TableCell sx={infoStyle}>
          <Typography sx={textStyle}>{hiringDateYear}</Typography>
        </TableCell>
      </TableRow>
    </Table>
  );
};

export default HiringDateTable;
