import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";
import { closeDeleteTariffDialog, useTariffStore } from "@root/stores/tariffs";
import { requestTariffs } from "@root/services/tariffs.service";
import { enqueueSnackbar } from "notistack";
import { deleteManyTariffs } from "@root/api/tariffs";
import { devlog } from "@frontend/kitui";


export default function DeleteModal() {
    const deleteTariffIds = useTariffStore(state => state.deleteTariffIds);

    async function handleTariffDeleteClick() {
        if (!deleteTariffIds?.length) return;

        const results = await deleteManyTariffs(deleteTariffIds);

        enqueueSnackbar(`Тарифов удалено: ${results.deletedCount}, ошибок: ${results.errorCount}`);
        if (results.errors.length) devlog("Errors deleting tariffs", results.errors);
        closeDeleteTariffDialog();

        requestTariffs();
    };

    return (
        <Modal
            open={Boolean(deleteTariffIds?.length)}
            onClose={closeDeleteTariffDialog}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
        >
            <Box
                sx={{
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    width: 400,
                    bgcolor: "background.paper",
                    border: "2px solid gray",
                    borderRadius: "6px",
                    boxShadow: 24,
                    p: 4,
                }}
            >
                <Typography id="modal-modal-title" variant="h6" component="h2">
                    Вы уверены, что хотите удалить тариф(ы)?
                </Typography>
                <Box
                    sx={{
                        mt: "20px",
                        display: "flex",
                        width: "332px",
                        justifyContent: "space-between",
                        alignItems: "center",
                    }}
                >
                    <Button
                        onClick={() => handleTariffDeleteClick()}
                        sx={{ width: "40px", height: "25px" }}
                    >
                        Да
                    </Button>
                    {/* <Typography>Тариф:</Typography>
            {tariffName.map((name, index) => (
              <Typography key={index}>{name};</Typography>
            ))} */}
                </Box>
            </Box>
        </Modal>
    );
}