import * as React from "react";
import { Box, Modal, Fade, Backdrop, Button, TextField } from "@mui/material";
import theme from "../../../../../theme";
import { ArrayProps } from "../../../../../model/tariff";
import { useTariffStore } from "../../../../../stores/tariffs";


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

const ModalMini = ({ open, type, variant, close }: MWProps) => {
    let tariffsArray = useTariffStore(state => state.tariffs);
    const tariffsArraySet = useTariffStore(state => state.setTariffs);

    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 data = [0, 0, 0];

                if (variant === 0) { data[0] = parseInt(fieldTime.current.value); }
                if (variant === 1) { data[1] = parseInt(fieldTime.current.value); }
                if (variant === 2) { data[2] = parseInt(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
                } as ArrayProps];

                tariffsArraySet(tariffsArrayNew);

                close();
            }
        }
    };

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