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

export interface MWProps {
  open: boolean
}

const ModalUser = ({open}: MWProps ) =>  {
  return (
    <React.Fragment>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={ open }
      onClose={ useLinkClickHandler('/users') }
        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,
            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={{
                width: "200px",
                marginLeft: "20px"
              }}>
                <Typography>Id: 1</Typography>
                <Typography>Email: 2</Typography>
                <Typography>Номер телефона: 3</Typography>
              </Box>
            </Box>
          </Box>
        </Fade>
      </Modal>
    </React.Fragment>
  );
}


export default ModalUser;