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(() => {
  console.log(whyCantCreatePublic)
if (Object.values(whyCantCreatePublic).length===0) {
  console.log("нет проблем")
  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>
  );
};