import { Skeleton, Typography, useMediaQuery, useTheme } from "@mui/material";
import React, { useEffect, useState } from "react";
import Box from "@mui/material/Box";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuizStore } from "@root/quizes/store";
import { useNavigate } from "react-router-dom";
import { PartnersBoard } from "./PartnersBoard/PartnersBoard";
import { IntegrationsModal } from "./IntegrationsModal/IntegrationsModal";
import { partnersMock } from "./mocks/MockData";

interface IntegrationsPageProps {
  heightSidebar: number;
  mobileSidebar: boolean;
}

export const IntegrationsPage = ({
  heightSidebar,
  mobileSidebar,
}: IntegrationsPageProps) => {
  const quiz = useCurrentQuiz();
  const { editQuizId } = useQuizStore();
  const theme = useTheme();
  const navigate = useNavigate();
  const isMobile = useMediaQuery(theme.breakpoints.down(660));
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [companyName, setCompanyName] = useState<string | null>(null);

  useEffect(() => {
    if (editQuizId === null) navigate("/list");
  }, [navigate, editQuizId]);

  const heightBar = heightSidebar + 51 + 88 + 36 + 25;

  if (quiz === undefined)
    return (
      <Skeleton sx={{ width: "100vw", height: "100vh", transform: "none" }} />
    );

  const handleCloseModal = () => {
    setIsModalOpen(false);
    // setTimeout(() => {
    //   setCompanyName(null);
    // }, 300);
  };

  return (
    <>
      <Box
        sx={{
          width: "100%",
          padding: isMobile
            ? mobileSidebar
              ? `calc(${heightBar}px - 92px) 16px 70px 16px`
              : "67px 16px 70px 16px"
            : "25px",
          height: isMobile ? "100vh" : "calc(100vh - 80px)",
        }}
      >
        <Typography
          variant="h5"
          sx={{ marginBottom: "40px", color: "#333647" }}
        >
          Интеграции
        </Typography>
        <PartnersBoard
          partners={partnersMock}
          setIsModalOpen={setIsModalOpen}
          setCompanyName={setCompanyName}
          isModalOpen={isModalOpen}
          handleCloseModal={handleCloseModal}
        />
        {/*<IntegrationsModal*/}
        {/*  isModalOpen={isModalOpen}*/}
        {/*  handleCloseModal={handleCloseModal}*/}
        {/*  companyName={companyName}*/}
        {/*/>*/}
      </Box>
    </>
  );
};