import { Box, Modal, Typography, Divider } from "@mui/material";

import { useUiTools } from "@root/uiTools/store";
import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
import { useLayoutEffect } from "react";

export const ModalInfoWhyCantCreate = () => {
  const { whyCantCreatePublic, openModalInfoWhyCantCreate } = useUiTools();

  useLayoutEffect(() => {
    if (Object.values(whyCantCreatePublic).length === 0) {
      updateModalInfoWhyCantCreate(false);
    }
  }, [openModalInfoWhyCantCreate]);

  return (
    <Modal
      open={openModalInfoWhyCantCreate}
      onClose={() => updateModalInfoWhyCantCreate(false)}
    >
      <Box
        sx={{
          position: "absolute" as "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          maxWidth: "620px",
          width: "100%",
          bgcolor: "background.paper",
          borderRadius: "12px",

          boxShadow: 24,
          p: "25px",
          minHeight: "60vh",
          maxHeight: "90vh",
          overflow: "auto",
        }}
      >
        {Object.values(whyCantCreatePublic).map((data) => {
          return (
            <Box>
              <Typography color="#7e2aea">
                {data.name === "quiz" ? "У квиза" : `У вопроса "${data.name}"`}
              </Typography>
              {data.problems.map((problem) => (
                <Typography p="5px 0">{problem}</Typography>
              ))}
              <Divider />
            </Box>
          );
        })}
      </Box>
    </Modal>
  );
};