import * as React from "react";
import { Box, Typography, TextField, Button } 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 Radio from '@mui/material/Radio';
import theme from "../../theme";


const Users: React.FC = () =>  {
  const [selectedValue, setSelectedValue] = React.useState('a');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <React.Fragment>
      <Typography 
        variant="caption"  
        sx={{
          width: "90%",
          height: "60px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          border: "2px solid",
          fontWeight: "normal",
          borderColor: theme.palette.golden.main
      }}>
        ИНФОРМАЦИЯ О ПРОЕКТЕ
      </Typography>


      <Table sx={{ 
        width: "90%",
        border: "2px solid",
        borderColor: theme.palette.secondary.main,
        marginTop: "35px",
      }} aria-label="simple table">
        <TableHead>
          <TableRow sx={{
            borderBottom: "2px solid",
            borderColor: theme.palette.grayLight.main,
            height: "100px"
          }}>
            <TableCell>
              <Typography 
                variant="h4" 
                sx={{
                color: theme.palette.secondary.main,
              }}>
                Имя
              </Typography>
            </TableCell>
            <TableCell>
              <Typography 
                variant="h4" 
                sx={{
                color: theme.palette.secondary.main,
              }}>
                Описание
              </Typography>
            </TableCell>
            <TableCell>
              <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"
          }}>
            <TableCell>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                admin
              </Typography>
            </TableCell>
            <TableCell>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                Администратор сервиса
              </Typography>
            </TableCell>
            <TableCell>
              <Radio 
                checked={selectedValue === 'a'}
                onChange={handleChange}
                value="a"
                sx={{
                '&, &.Mui-checked': {
                  color: theme.palette.secondary.main,
                },
              }} />
            </TableCell>
          </TableRow>

          <TableRow sx={{
            borderBottom: "2px solid",
            borderColor: theme.palette.grayLight.main,
            height: "100px"
          }}>
            <TableCell>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                manager
              </Typography>
            </TableCell>
            <TableCell>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                Менеджер сервиса
              </Typography>
            </TableCell>
            <TableCell>
              <Radio 
                checked={selectedValue === 'b'}
                onChange={handleChange}
                value="b"
                sx={{
                '&, &.Mui-checked': {
                  color: theme.palette.secondary.main,
                },
              }} />
            </TableCell>
          </TableRow>

          <TableRow sx={{
            borderBottom: "1px solid",
            border: theme.palette.secondary.main,
            height: "100px"
          }}>
            <TableCell>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                user
              </Typography>
            </TableCell>
            <TableCell>
              <Typography sx={{
                color: theme.palette.secondary.main
              }}>
                Пользователь сервиса
              </Typography>
            </TableCell>
            <TableCell>
              <Radio 
                checked={selectedValue === 'c'}
                onChange={handleChange}
                value="c"
                sx={{
                '&, &.Mui-checked': {
                  color: theme.palette.secondary.main,
                },
              }} />
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>


      <Box sx={{
        width: "90%",
        marginTop: "35px"
      }}>
        <Box sx={{ display: "flex" }}>
          <TextField
            id = "standard-basic"
            label = "id"
            variant = "filled"
            color = "secondary"
            sx = {{ 
              width: "80%"
            }}
            InputProps={{
              style: {
                backgroundColor: theme.palette.content.main,
                color: theme.palette.secondary.main,
                borderBottom: "1px solid",
                borderColor: theme.palette.grayLight.main,
              } }} 
            InputLabelProps={{
              style: {
                color: theme.palette.secondary.main
              } }} 
          />
          <Button 
            variant = "text"
            sx={{
              backgroundColor: theme.palette.content.main,
              color: theme.palette.secondary.main,
              width: "20%",
              "&:hover": {
                backgroundColor: theme.palette.content.main
              }
            }}>
              НАЙТИ
          </Button>
        </Box>

        <Box sx={{ display: "flex" }}>
          <TextField
            id = "standard-basic"
            label = "mail"
            variant = "filled"
            color = "secondary"
            sx = {{ 
              width: "80%"
            }}
            InputProps={{
              style: {
                backgroundColor: theme.palette.content.main,
                color: theme.palette.secondary.main,
                borderBottom: "1px solid",
                borderColor: theme.palette.grayLight.main,
              } }} 
            InputLabelProps={{
              style: {
                color: theme.palette.secondary.main
              } }} 
          />
          <Button 
            variant = "text"
            sx={{
              backgroundColor: theme.palette.content.main,
              color: theme.palette.secondary.main,
              width: "20%",
              "&:hover": {
                backgroundColor: theme.palette.content.main
              }
            }}>
              СБРОСИТЬ 
          </Button>
        </Box>
      </Box>
    </React.Fragment>
  );
}


export default Users;