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 type UserInfoTableProps = {
  payroll: string;
};

export const UserInfoTable: FC<UserInfoTableProps> = props => {
  const { payroll } = props;
  const { user } = useAuth();
  const { firstName, lastName } = user!;

  const date = new Date();

  const day = date.getDate().toString().padStart(2, '0');
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const year = date.getFullYear();

  const headerStyle = {
    pb: 0,
    borderBottom: 0,
    width: '58px',
    py: 0,
    textAlign: 'center',
  };

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

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

  return (
    <Table sx={{ width: '674px' }}>
      <TableRow sx={{ display: 'flex' }}>
        <TableCell
          sx={{ borderBottom: 0, width: '516px', pl: 0, pt: 0, pb: 1 }}
        >
          <Typography
            color="secondary"
            sx={textStyle}
          >
            NOMBRE DEL EMPLEADO
          </Typography>
        </TableCell>
        <TableCell sx={{ borderBottom: 0, width: '158px', p: 0, pb: 1 }}>
          <Typography
            color="secondary"
            sx={textStyle}
          >
            FECHA DE SOLICITUD
          </Typography>
        </TableCell>
      </TableRow>
      <TableRow sx={{ display: 'flex' }}>
        <TableCell sx={{ borderBottom: 0, width: '195px', p: 0, px: 1 }}>
          <Typography
            color="secondary"
            sx={{ fontSize: '12px' }}
          >
            APELLIDO(S)
          </Typography>
        </TableCell>
        <TableCell sx={{ pb: 0, borderBottom: 0, width: '195px', p: 0, px: 1 }}>
          <Typography
            color="secondary"
            sx={{ fontSize: '12px' }}
          >
            NOMBRE(S)
          </Typography>
        </TableCell>
        <TableCell sx={{ pb: 0, borderBottom: 0, width: '110px', p: 0, px: 1 }}>
          <Typography
            color="secondary"
            sx={{ fontSize: '12px', textAlign: 'center' }}
          >
            NRO. NÓMINA
          </Typography>
        </TableCell>
        <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 sx={{ display: 'flex' }}>
        <TableCell sx={{ ...infoStyle, px: 1, width: '195px' }}>
          <Typography sx={textStyle}>{lastName}</Typography>
        </TableCell>
        <TableCell sx={{ ...infoStyle, px: 1, width: '195px' }}>
          <Typography sx={textStyle}>{firstName}</Typography>
        </TableCell>
        <TableCell sx={{ ...infoStyle, px: 1, width: '110px' }}>
          <Typography
            sx={{ fontSize: '14px', fontWeight: 600, textAlign: 'center' }}
          >
            {payroll}
          </Typography>
        </TableCell>
        <TableCell sx={{ ...infoStyle, textAlign: 'center' }}>
          <Typography sx={textStyle}>{day}</Typography>
        </TableCell>
        <TableCell sx={{ ...infoStyle, textAlign: 'center' }}>
          <Typography sx={textStyle}>{month}</Typography>
        </TableCell>
        <TableCell sx={{ ...infoStyle, textAlign: 'center' }}>
          <Typography sx={textStyle}>{year}</Typography>
        </TableCell>
      </TableRow>
    </Table>
  );
};

export default UserInfoTable;