adminFront/src/kitUI/DeleteModal.tsx

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";
import { useGetTariffs } from "@root/hooks/useGetTariffs.hook";

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

export default function DeleteModal({
  open,
  handleClose,
  selectedTariffs
}: DeleteModalProps) {
  const { requestTariffs } = useGetTariffs()
  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>
  );
}