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

export interface MWProps {
  open: boolean
  variant: number
  close: () => void
}

const ModalMini = ({open, variant, close}: MWProps ) =>  {
  const variants = [ "Количество", "Срок" ];
  const units = [ "", "дней" ];

  return (
    <React.Fragment>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={ open }
        onClose={ () => close() }
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Box sx={{
            position: "absolute" as "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            width: "30%",
            height: "25%",
            bgcolor: theme.palette.menu.main,
            boxShadow: 24,
            color: theme.palette.secondary.main,
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
          }}>
            <Box sx={{ 
              display: "flex",
              width: "90%"
            }}>
              <Typography id="transition-modal-title" sx={{ 
                width: "90%",
                display: "flex",
                justifyContent: "space-between"
              }}>
                { variants[ variant ] }:
              </Typography>
              <Typography sx={{
                width: "100%",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center"
              }}>
                5 { units[ variant ] }
              </Typography>
            </Box>

            <Box sx={{ 
              display: "flex",
              width: "90%",
              marginTop: "20px"
            }}>
              <Typography id="transition-modal-title" sx={{ 
                display: "flex",
                width: "90%",
                justifyContent: "space-between"
              }}>
                Цена: 
              </Typography>
              <Typography sx={{
                width: "100%",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center"
              }}>
                100500 $
              </Typography>
            </Box>

            <Button 
              variant = "contained"
              onClick={ () => close() }
              sx={{
                backgroundColor: theme.palette.grayDark.main,
                marginTop: "30px",
                height: "42px",
                fontWeight: "normal",
                fontSize: "17px",
                "&:hover": {
                  backgroundColor: theme.palette.grayMedium.main
                }
              }}>
                Применить
            </Button>
          </Box>
        </Fade>
      </Modal>
    </React.Fragment>
  );
}


export default ModalMini;
