import * as React from "react";
import { Box, Modal, Fade, Backdrop, Typography, Button } from "@mui/material";
import theme from "../../theme";


const ModalWindow: React.FC = () =>  {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  
  return (
    <React.Fragment>
      <Button onClick={handleOpen}>Open modal</Button>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Box sx={{
            position: "absolute" as "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            width: "90%",
            height: "90%",
            bgcolor: theme.palette.menu.main,
            border: "2px solid #000",
            boxShadow: 24,
            color: theme.palette.secondary.main,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}>
            <Typography id="transition-modal-title" variant="caption">
              Проект
            </Typography>

            <Box sx={{
              width: "100%",
              marginTop: "15px",
              display: "flex"
            }}>
              <Box sx={{
                backgroundColor: theme.palette.grayMedium.main,
                width: "155px"
              }}>
                <Typography variant="h4" sx={{
                  backgroundColor: theme.palette.grayMedium.main,
                  width: "100%",
                  height: "55px",   //205px
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  alignItems: "center",
                  cursor: "pointer",
                }}>
                  СТАТИСТИКА
                </Typography>
                <Typography variant="h4" sx={{
                  backgroundColor: theme.palette.grayMedium.main,
                  color: theme.palette.grayDisabled.main,
                  width: "100%",
                  height: "55px",   //205px
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  alignItems: "center",
                  cursor: "pointer",
                  textAlign: "center"
                }}>
                  ТРЕКЕРЫ УСТРОЙСТВ
                </Typography>
                <Typography variant="h4" sx={{
                  backgroundColor: theme.palette.grayMedium.main,
                  color: theme.palette.grayDisabled.main,
                  width: "100%",
                  height: "55px",   //205px
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  alignItems: "center",
                  cursor: "pointer",
                  textAlign: "center"
                }}>
                  ВВОДЫ
                </Typography>
                <Typography variant="h4" sx={{
                  backgroundColor: theme.palette.grayMedium.main,
                  color: theme.palette.grayDisabled.main,
                  width: "100%",
                  height: "55px",   //205px
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  alignItems: "center",
                  cursor: "pointer",
                  textAlign: "center"
                }}>
                  ВЫВОДЫ
                </Typography>
              </Box>
              <Box sx={{
                backgroundColor: theme.palette.grayMedium.main,
                width: "calc(100% - 155px)",
                height: "55px",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center"
              }}>
                Long text Long text Long text Long text Long text 
                Long text Long text Long text Long text Long text 
                Long text Long text Long text 
              </Box>
            </Box>
          </Box>
        </Fade>
      </Modal>
    </React.Fragment>
  );
}

export default ModalWindow;