adminFront/src/pages/dashboard/Content/Tariffs/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 { useTariffStore } from "@root/stores/tariffsStore";
import { requestTariffs } from "@root/services/tariffs.service";
import { enqueueSnackbar } from "notistack";
import { authStore } from "@root/stores/auth";

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

type DeleteTariffRequest = {
  id: string;
};

const baseUrl =
  process.env.NODE_ENV === "production"
    ? "/strator"
    : "https://admin.pena.digital/strator";

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

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

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

    try {
      await makeRequest<DeleteTariffRequest>({
        url: baseUrl + "/tariff/",
        method: "delete",
        bearer: true,
        body: { id },
      });
    } 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>
  );
}