import * as React from "react";
import { Box, Modal, Fade, Backdrop, Typography, Button, TextField } 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",
          }}>
            <TextField
              id = "standard-basic"
              label = { variants[ variant ] }
              variant = "filled"
              color = "secondary"
              sx = {{ width: "80%" }}
              InputProps={{
                style: {
                  backgroundColor: theme.palette.content.main,
                  color: theme.palette.secondary.main,
                } }} 
              InputLabelProps={{
                style: {
                  color: theme.palette.secondary.main
                } }} 
            />

            <TextField
              id = "standard-basic"
              label = "Цена"
              variant = "filled"
              color = "secondary"
              sx = {{ width: "80%", marginTop: "5px" }}
              InputProps={{
                style: {
                  backgroundColor: theme.palette.content.main,
                  color: theme.palette.secondary.main,
                } }} 
              InputLabelProps={{
                style: {
                  color: theme.palette.secondary.main
                } }} 
            />


            <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;