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


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

const ModalPackage = ({open, close}: MWProps ) =>  {
  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: "350px",
            height: "170px",
            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 = { "Название пакета" }
              variant = "filled"
              color = "secondary"
              sx = {{ width: "80%", marginTop: theme.spacing(1) }}
              InputProps={{
                style: {
                  backgroundColor: theme.palette.content.main,
                  color: theme.palette.secondary.main,
                } }} 
              InputLabelProps={{
                style: {
                  color: theme.palette.secondary.main
                } }} 
            />

            <Button 
              variant = "contained"
              onClick={ () => console.log(123) }
              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 ModalPackage;