import * as React from "react";
import { Box, Typography } from "@mui/material";
import { ThemeProvider } from "@mui/material";
import theme from "../../theme";


const ModalWindow: React.FC = () =>  {
  return (
    <React.Fragment>
      <ThemeProvider theme={theme}>
        <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>
      </ThemeProvider>
    </React.Fragment>
  );
}


export default ModalWindow;