frontPanel/src/pages/IntegrationsPage/PartnersBoard/PartnersBoard.tsx

import { Box, Typography, useTheme } from "@mui/material";
import React, { FC, lazy, Suspense, useState } from "react";
import { ServiceButton } from "./buttons/ServiceButton";
import { ZapierButton } from "./buttons/ZapierButton";
import { PostbackButton } from "./buttons/PostbackButton";
import { YandexMetricaLogo } from "../mocks/YandexMetricaLogo";
import { VKPixelLogo } from "../mocks/VKPixelLogo";
import { QuizMetricType } from "@model/quizSettings";
import { AmoCRMLogo } from "../mocks/AmoCRMLogo";
import type { LeadTargetModel } from "@/api/leadtarget";
import { useCurrentQuiz } from "@/stores/quizes/hooks";

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

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

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

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

type PartnersBoardProps = {
  setIsModalOpen: (value: boolean) => void;
  companyName: keyof typeof QuizMetricType | null;
  setCompanyName: (value: keyof typeof QuizMetricType) => void;
  isModalOpen: boolean;
  handleCloseModal: () => void;
  zapierTarget?: LeadTargetModel | null;
  postbackTarget?: LeadTargetModel | null;
};

export const PartnersBoard: FC<PartnersBoardProps> = ({
  setIsModalOpen,
  isModalOpen,
  handleCloseModal,
  companyName,
  setCompanyName,
  zapierTarget,
  postbackTarget,
}) => {
  const theme = useTheme();
  const quiz = useCurrentQuiz();

  const [isAmoCrmModalOpen, setIsAmoCrmModalOpen] = useState<boolean>(false);
  const handleCloseAmoSRMModal = () => setIsAmoCrmModalOpen(false);
  const [isBitrixModalOpen, setIsBitrixModalOpen] = useState<boolean>(false);
  const handleCloseBirixModal = () => setIsBitrixModalOpen(false);

  const [isZapierModalOpen, setIsZapierModalOpen] = useState<boolean>(false);
  const handleCloseZapierModal = () => setIsZapierModalOpen(false);
  const [isPostbackModalOpen, setIsPostbackModalOpen] = useState<boolean>(false);
  const handleClosePostbackModal = () => setIsPostbackModalOpen(false);

  const sectionTitleStyles = {
    textAlign: { xs: "start", sm: "start", md: "start" } as const,
    lineHeight: "1",
    marginBottom: "12px",
    marginTop: "20px",
    color: theme.palette.grey3.main,
    fontSize: "18px",
  };

  const containerStyles = {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: { xs: "start", sm: "start", md: "start" },
    gap: { xs: "15px", md: "20px" },
  };

  return (
    <Box
      sx={{
        width: "100%",
        display: "flex",
        flexDirection: "column",
        justifyContent: { xs: "center", sm: "center", md: "start" },
      }}
    >
      <Box>
        <Typography
          variant="h6"
          sx={{
            ...sectionTitleStyles,
            marginTop: 0,
          }}
        >
          CRM
        </Typography>
        <Box sx={containerStyles}>
          <ServiceButton
            logo={<AmoCRMLogo />}
            setIsModalOpen={setIsAmoCrmModalOpen}
            setCompanyName={setCompanyName}
            name={"amoCRM"}
          />
          <ServiceButton
            logo={"Bitrix"}
            setIsModalOpen={setIsBitrixModalOpen}
            setCompanyName={setCompanyName}
            name={"Bitrix"}
          />
        </Box>

        <Typography variant="h6" sx={sectionTitleStyles}>
          Аналитика
        </Typography>
        <Box sx={containerStyles}>
          <ServiceButton
            logo={<YandexMetricaLogo />}
            setIsModalOpen={setIsModalOpen}
            name={"yandex"}
            setCompanyName={setCompanyName}
          />
          <ServiceButton
            logo={<VKPixelLogo />}
            title={"VK Пиксель"}
            name={"vk"}
            setIsModalOpen={setIsModalOpen}
            setCompanyName={setCompanyName}
          />
        </Box>

        <Typography variant="h6" sx={sectionTitleStyles}>
          Автоматизация
        </Typography>
        <Box sx={containerStyles}>
          <ZapierButton
            setIsModalOpen={setIsZapierModalOpen}
            setCompanyName={setCompanyName}
          />
          <PostbackButton
            setIsModalOpen={setIsPostbackModalOpen}
            setCompanyName={setCompanyName}
          />
        </Box>
      </Box>

      {companyName && (
        <Suspense>
          <AnalyticsModal
            isModalOpen={isModalOpen}
            handleCloseModal={handleCloseModal}
            companyName={companyName}
          />
        </Suspense>
      )}
      {companyName && isAmoCrmModalOpen && (
        <Suspense>
          <AmoCRMModal
            isModalOpen={isAmoCrmModalOpen}
            handleCloseModal={handleCloseAmoSRMModal}
            companyName={companyName}
            quiz={quiz!}
          />
        </Suspense>
      )}
      {companyName && isBitrixModalOpen && (
        <Suspense>
          <BitrixModal
            isModalOpen={isBitrixModalOpen}
            handleCloseModal={handleCloseBirixModal}
            companyName={companyName}
            quiz={quiz!}
          />
        </Suspense>
      )}
      {companyName && isZapierModalOpen && (
        <Suspense>
          <ZapierModal
            isModalOpen={isZapierModalOpen}
            handleCloseModal={handleCloseZapierModal}
            companyName={companyName}
            quiz={quiz!}
            currentTarget={zapierTarget ?? null}
          />
        </Suspense>
      )}
      {companyName && isPostbackModalOpen && (
        <Suspense>
          <PostbackModal
            isModalOpen={isPostbackModalOpen}
            handleCloseModal={handleClosePostbackModal}
            companyName={companyName}
            quiz={quiz!}
            currentTarget={postbackTarget ?? null}
          />
        </Suspense>
      )}
    </Box>
  );
};