import * as React from "react";
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 { GridSelectionModel } from "@mui/x-data-grid";
import { useTariffStore } from "@root/stores/tariffsStore";
import { enqueueSnackbar } from "notistack";
import axios from "axios";
import { authStore } from "@root/stores/auth";

type DeleteModalProps = {
  open: boolean | string;
  handleClose: () => void;
  selectedTariffs: any;
  requestTariffs: () => Promise<void>;
};

export default function DeleteModal({
  open,
  handleClose,
  selectedTariffs,
  requestTariffs,
}: DeleteModalProps) {
  const { token } = authStore();
  const tariffs = useTariffStore((state) => state.tariffs);

  const deleteTariff = async (id: string): Promise<void> => {
    const currentTariff = tariffs[id];

    if (!currentTariff) {
      enqueueSnackbar("Тариф не найден");
      return;
    }

    try {
      await axios.delete("https://admin.pena.digital/strator/tariff/", {
        data: { id },
        headers: { Authorization: `Bearer ${token}` },
      });
    } catch {
      enqueueSnackbar("Ошибка при удалении тарифа на бэкэнде");
    }
  };

  const onClickTariffDelete = () => {
    if (typeof open === "string") {
      deleteTariff(open);
      requestTariffs();
      handleClose();
      return;
    }
    selectedTariffs.forEach((id: string) => {
      deleteTariff(id);
    });
    handleClose();
    requestTariffs();
  };
  return (
    <div>
      <Modal
        open={Boolean(open)}
        onClose={handleClose}
        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">
            Вы уверены, что хотите удалить{" "}
            {typeof open === "string" ? "тариф" : "тарифы"} ?
          </Typography>
          <Box
            sx={{
              mt: "20px",
              display: "flex",
              width: "332px",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <Button
              onClick={() => onClickTariffDelete()}
              sx={{ width: "40px", height: "25px" }}
            >
              Да
            </Button>
            {/* <Typography>Тариф:</Typography>
            {tariffName.map((name, index) => (
              <Typography key={index}>{name};</Typography>
            ))} */}
          </Box>
        </Box>
      </Modal>
    </div>
  );
}