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


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

const ModalPackage = ({open, newPackage, close}: MWProps ) =>  {
  const fieldName = React.useRef<HTMLInputElement | null>(null);

  const checkName = () => {
    if( fieldName.current != null )  {
      newPackage( fieldName.current.value );
    }
  }

  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
                } }} 
              inputRef={ fieldName }
            />

            <Button 
              variant = "contained"
              onClick={ () => checkName() }
              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;