import * as React from "react";
import { useNavigate  } from "react-router-dom";
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 Skeleton from "@mui/material/Skeleton";
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ClearIcon from '@mui/icons-material/Clear';
import { getRoles_mock, TMockData } from "../../../api/roles";
import theme from "../../../theme"


const Users: React.FC = () =>  {
  const radioboxes = [ "a", "b", "c" ];

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

  const navigate = useNavigate();

  const [data, setData] = React.useState<TMockData>([]);
  const handleChangeData = () => {
    getRoles_mock().then((mockdata) => {
      setData( mockdata );
    })
  };

  const [accordionHeader, setAccordionHeader] = React.useState<string>("none");
  const [accordionState, setAccordionState] = React.useState<boolean>(true);
  const [accordionText, setAccordionText] = React.useState<string>("");
  const handleChangeAccordion = (text:string) => {
    if( text == "" )  {
      setAccordionState( true );
      setAccordionHeader("none");
    }
    else  {
      handleToggleAccordion();
      setAccordionHeader("flex")
    }

    accordionState
      ? setAccordionText( text )
      : setAccordionText( "" )
  }

  const handleToggleAccordion = () => {
    setAccordionState( !accordionState );
  }

  handleChangeData();

  return (
    <React.Fragment>
        <Button 
          variant="text"  
          onClick={ () => navigate("/modalAdmin") }
          sx={{
            width: "84%",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            marginBottom: "35px",
            border: "2px solid",
            fontWeight: "normal",
            borderColor: theme.palette.golden.main,
            color: theme.palette.secondary.main,
            "&:hover": {
              backgroundColor: theme.palette.menu.main
            }
        }}>
          ИНФОРМАЦИЯ О ПРОЕКТЕ
        </Button>

      
        <Accordion sx={{
          width: "84%",
          backgroundColor: theme.palette.content.main
        }} expanded={ accordionState }>
          <AccordionSummary
            sx = {{ display: accordionHeader }}
            expandIcon={
              <ExpandMoreIcon sx={{
                color: theme.palette.secondary.main
              }} 
              onClick={ () => handleToggleAccordion() }
              />
            }
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography sx={{
              width: "100%", 
              color: theme.palette.secondary.main
            }}>
              { accordionText }
            </Typography>

            <Box sx={{ 
              display: "flex",
              alignItems: "right"
            }}>
              <ClearIcon 
                sx={{ color: theme.palette.secondary.main }} 
                onClick={ () => handleChangeAccordion("") }
              />
            </Box>
          </AccordionSummary>
          <AccordionDetails>

        <Table sx={{ 
          width: "100%",
          border: "2px solid",
          borderColor: theme.palette.secondary.main,
        }} 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>

          { 
          data.length
            ? ( 
                data.map(function(item, i)  {
                  return(
                    <TableRow sx={{
                      borderTop: "2px solid",
                      borderColor: theme.palette.grayLight.main,
                      height: "100px",
                      cursor: "pointer"
                    }} 
                    key={ item.key } 
                    onClick={ () => handleChangeAccordion( item.desc ) }>
                      <TableCell>
                        <Typography sx={{
                          color: theme.palette.secondary.main
                        }}>
                          { item.name }
                        </Typography>
                      </TableCell>
                      <TableCell>
                        <Typography sx={{
                          color: theme.palette.secondary.main
                        }}>
                          { item.desc }
                        </Typography>
                      </TableCell>
                      <TableCell>
                        <Radio 
                          checked={selectedValue === radioboxes[ i ]}
                          onChange={handleChange}
                          value={ radioboxes[ i ] }
                          sx={{
                          "&, &.Mui-checked": {
                            color: theme.palette.secondary.main,
                          },
                        }} />
                      </TableCell>
                    </TableRow>
                  );
                })

              ) : ( 
                <TableRow sx={{
                  borderTop: "2px solid",
                  borderColor: theme.palette.grayLight.main,
                  height: "100px"
                }}>
                  <TableCell colSpan={3}>
                    <Skeleton variant="rectangular" 
                      sx={{
                        width: "100%",
                        minWidth: "100%",
                        minHeight: "200px",
                        marginTop: "15px",
                        marginBottom: "15px"
                      }}
                    />
                  </TableCell>
                </TableRow>
               )
          }
          
          </TableBody>
        </Table>

        </AccordionDetails>
      </Accordion>


      <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
              } }} 
          />
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'center',
              maxWidth: '317px',
              width: '100%'
            }}
          >
            <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>

        <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
              } }} 
          />
          <Box
              sx={{
                display: 'flex',
                justifyContent: 'center',
                maxWidth: '317px',
                width: '100%'
              }}
          >
            <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>
      </Box>


      
      <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>
          </TableRow>
        </TableHead>

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

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

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


export default Users;