import * as React from "react";
import { Box, Modal, Fade, Backdrop, Typography, Button, TextField } from "@mui/material";
import { ArrayProps } from "../types";
import useStore, { StoreState } from "../../../../../store";
import theme from "../../../../../theme";


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

const ModalMini = ({open, type, variant, close}: MWProps ) =>  {
  let tariffsArray:Array<ArrayProps> = useStore((state) => state.tariffsArray);
  const { tariffsArraySet } = useStore<StoreState>((state) => state);

  const types = [ "", "Шаблонизатор документов", "Опросник", "Сокращатель ссылок" ];
  const variants = [ "Количество", "Срок (дней)", "Количество (гб)" ];

  const fieldName = React.useRef<HTMLInputElement | null>(null);
  const fieldTime = React.useRef<HTMLInputElement | null>(null);
  const fieldPrice = React.useRef<HTMLInputElement | null>(null);

  const checkTariff = () => {
    if( fieldName.current != null && fieldTime.current != null && fieldPrice.current != null )  { 
    if( fieldName.current.value && fieldTime.current.value && fieldPrice.current.value )  {
      const getData = localStorage.getItem("tariffs");
      
      if( getData != null )   { tariffsArray = JSON.parse(getData); }

      const data = [ "", "", "" ];

      if( variant == 0 )    { data[ 0 ] = fieldTime.current.value; }
      if( variant == 1 )    { data[ 1 ] = fieldTime.current.value; }
      if( variant == 2 )    { data[ 2 ] = fieldTime.current.value; }

      const tariffsArrayNew = [...tariffsArray, {
        "id": new Date().getTime(), 
        "name": fieldName.current.value, 
        "type": "tariff", 
        "service": types[ type ], 
        "disk": data[ 2 ], 
        "time": data[ 1 ], 
        "points": data[ 0 ], 
        "price": +fieldPrice.current.value
      } ];

      tariffsArraySet( tariffsArrayNew );
      
      localStorage.setItem( "tariffs", JSON.stringify( tariffsArrayNew ) );
      close();

      console.log( tariffsArrayNew );
    }
    }
  }

  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: "350px",
            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 = { types[ type ] }
              disabled={ true }
              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
                } }} 
            />

            <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 }
            />

            <TextField
              id = "standard-basic"
              label = { variants[ variant ] }
              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={ fieldTime }
            />

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


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