import * as React from "react";
import { useNavigate  } from "react-router-dom";
import { Typography } from "@mui/material";
import Table from '@mui/material/Table';
import TableHead from '@mui/material/TableHead';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import theme from "../../../../theme";


const Users: React.FC = () =>  {
  const [selectedValue, setSelectedValue] = React.useState('a');
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  const navigate = useNavigate();

  return (
    <React.Fragment>
      <Typography 
        variant="subtitle1"  
        sx={{
          width: "90%",
          height: "60px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          color: theme.palette.secondary.main
      }}>
        Юридические лица
      </Typography>

      <Table sx={{ 
        width: "90%",
        border: "2px solid",
        borderColor: theme.palette.grayLight.main,
        marginTop: "35px",
      }} aria-label="simple table">
        <TableHead>
          <TableRow sx={{
            borderBottom: "2px solid",
            borderColor: theme.palette.grayLight.main,
            height: "100px"
          }}>
            <TableCell sx={{ textAlign: "center" }}>
              <Typography 
                variant="h4" 
                sx={{
                color: theme.palette.secondary.main,
              }}>
                ID
              </Typography>
            </TableCell>
            <TableCell sx={{ textAlign: "center" }}>
              <Typography 
                variant="h4" 
                sx={{
                color: theme.palette.secondary.main,
              }}>
                Дата / время регистрации
              </Typography>
            </TableCell>
          </TableRow>
        </TableHead>

        <TableBody>
          <TableRow sx={{
            borderBottom: "2px solid",
            borderColor: theme.palette.grayLight.main,
            height: "100px",
            cursor: "pointer"
          }} onClick={ () => navigate("/modalEntities") }>
            <TableCell sx={{ textAlign: "center" }}>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                1
              </Typography>
            </TableCell>
            <TableCell sx={{ textAlign: "center" }}>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                2022
              </Typography>
            </TableCell>
          </TableRow>

          <TableRow sx={{
            borderBottom: "2px solid",
            borderColor: theme.palette.grayLight.main,
            height: "100px",
            cursor: "pointer"
          }} onClick={ () => navigate("/modalEntities") }>
            <TableCell sx={{ textAlign: "center" }}>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                2
              </Typography>
            </TableCell>
            <TableCell sx={{ textAlign: "center" }}>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                2021
              </Typography>
            </TableCell>
          </TableRow>

          <TableRow sx={{
            borderBottom: "1px solid",
            border: theme.palette.secondary.main,
            height: "100px",
            cursor: "pointer"
          }} onClick={ () => navigate("/modalEntities") }>
            <TableCell sx={{ textAlign: "center" }}>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                3
              </Typography>
            </TableCell>
            <TableCell sx={{ textAlign: "center" }}>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                2020
              </Typography>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </React.Fragment>
  );
}


export default Users;