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

type DeleteModalProps = {
  open: boolean;
  handleClose: () => void;

  tariffDelete: (tarifIid: GridSelectionModel) => Promise<void>;
  errorDelete: boolean;
  tariffId: GridSelectionModel;
  tariffName: string[];
};

export default function DeleteModal({
  open,
  handleClose,
  tariffDelete,
  errorDelete,
  tariffId,
  tariffName,
}: DeleteModalProps) {
  const onClickTariffDelete = () => {
    if (errorDelete) {
      return;
    }
    tariffDelete(tariffId);
    handleClose();
  };
  return (
    <div>
      <Modal
        open={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">
            Вы уверены, что хотите удалить тариф
          </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>
  );
}