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 amoCrmLogo from "./mocks/amoCrmLogo.png";
import { IntegrationsModal } from "./IntegrationsModal/IntegrationsModal";

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;

  const partnersMock = [
    { category: "CRM", name: "amoCRM", logo: amoCrmLogo },
    { category: "CRM", name: "bitrix" },
    { category: "CRM", name: "RetailCRM." },
    { category: "CRM", name: "SugarCRM." },
    { category: "SocialMedia", name: "Telegram" },
    { category: "SocialMedia", name: "VKontakte" },
    { category: "SocialMedia", name: "X.com" },
    { category: "Сервисы рассылок", name: "Mailchimp" },
    { category: "Сервисы рассылок", name: "GetResponse" },
    { category: "Сервисы рассылок", name: "SendPulse" },
  ];
  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}
        />
        <IntegrationsModal
          isModalOpen={isModalOpen}
          handleCloseModal={handleCloseModal}
          companyName={companyName}
        />
      </Box>
    </>
  );
};