import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import React, { FC, lazy, Suspense } from "react";
import { ServiceButton } from "./ServiceButton/ServiceButton";
import { YandexMetricaLogo } from "../mocks/YandexMetricaLogo";
// import AnalyticsModal from "./AnalyticsModal/AnalyticsModal";
import { VKPixelLogo } from "../mocks/VKPixelLogo";
import { QuizMetricType } from "@model/quizSettings";
import { AmoCRMLogo } from "../mocks/AmoCRMLogo";

const AnalyticsModal = lazy(() =>
  import("./AnalyticsModal/AnalyticsModal").then((module) => ({
    default: module.AnalyticsModal,
  })),
);

const AmoCRMModal = lazy(() =>
  import("../IntegrationsModal/AmoCRMModal").then((module) => ({
    default: module.AmoCRMModal,
  })),
);

type PartnersBoardProps = {
  setIsModalOpen: (value: boolean) => void;
  companyName: keyof typeof QuizMetricType | null;
  setCompanyName: (value: keyof typeof QuizMetricType) => void;
  isModalOpen: boolean;
  handleCloseModal: () => void;
  setIsAmoCrmModalOpen: (value: boolean) => void;
  isAmoCrmModalOpen: boolean;
  handleCloseAmoSRMModal: () => void;
};

export const PartnersBoard: FC<PartnersBoardProps> = ({
  setIsModalOpen,
  isModalOpen,
  handleCloseModal,
  companyName,
  setCompanyName,
  setIsAmoCrmModalOpen,
  isAmoCrmModalOpen,
  handleCloseAmoSRMModal,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  return (
    <Box
      sx={{
        width: "100%",
        display: "flex",
        flexDirection: "column",
        justifyContent: { xs: "center", sm: "center", md: "start" },
      }}
    >
      <Box>
        <Typography
          variant="h6"
          sx={{
            textAlign: { xs: "start", sm: "start", md: "start" },
            lineHeight: "1",
            marginBottom: "12px",
          }}
        >
          CRM
        </Typography>
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            justifyContent: { xs: "start", sm: "start", md: "start" },
          }}
        >
          <ServiceButton
            logo={<AmoCRMLogo />}
            setIsModalOpen={setIsAmoCrmModalOpen}
            setCompanyName={setCompanyName}
            name={"amoCRM"}
          />
        </Box>

        <Typography
          variant="h6"
          sx={{
            textAlign: { xs: "start", sm: "start", md: "start" },
            lineHeight: "1",
            marginBottom: "12px",
          }}
        >
          Аналитика
        </Typography>
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            justifyContent: { xs: "start", sm: "start", md: "start" },
          }}
        >
          <ServiceButton
            logo={<YandexMetricaLogo />}
            setIsModalOpen={setIsModalOpen}
            name={"yandex"}
            setCompanyName={setCompanyName}
          />
          <ServiceButton
            logo={<VKPixelLogo />}
            title={"VK Пиксель"}
            name={"vk"}
            setIsModalOpen={setIsModalOpen}
            setCompanyName={setCompanyName}
          ></ServiceButton>
        </Box>
      </Box>
      {companyName && (
        <Suspense>
          <AnalyticsModal
            isModalOpen={isModalOpen}
            handleCloseModal={handleCloseModal}
            companyName={companyName}
          />
        </Suspense>
      )}
      {companyName && (
        <Suspense>
          <AmoCRMModal
            isModalOpen={isAmoCrmModalOpen}
            handleCloseModal={handleCloseAmoSRMModal}
            companyName={companyName}
          />
        </Suspense>
      )}
    </Box>
  );
};