frontPanel/src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx

import {
  Button,
  Dialog,
  IconButton,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import React, { FC, useMemo, useState } from "react";
import Box from "@mui/material/Box";
import CloseIcon from "@mui/icons-material/Close";
import { IntegrationStep1 } from "./IntegrationStep1/IntegrationStep1";
import { IntegrationStep2 } from "./IntegrationStep2/IntegrationStep2";
import { IntegrationStep3 } from "./IntegrationStep3/IntegrationStep3";
import { IntegrationStep4 } from "./IntegrationStep4/IntegrationStep4";
import { IntegrationStep5 } from "./IntegrationStep5/IntegrationStep5";
import { IntegrationStep6 } from "./IntegrationStep6/IntegrationStep6";
import GearIcon from "@icons/GearIcon";
import { funnelsMock, performersMock, stagesMock } from "../mocks/MockData";
import File from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/File";

type IntegrationsModalProps = {
  isModalOpen: boolean;
  handleCloseModal: () => void;
  companyName: string | null;
};

export const IntegrationsModal: FC<IntegrationsModalProps> = ({
  isModalOpen,
  handleCloseModal,
  companyName,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  const [step, setStep] = useState<number>(0);
  const [selectedFunnelPerformer, setSelectedFunnelPerformer] = useState<
    string | null
  >(null);
  const [selectedFunnel, setSelectedFunnel] = useState<string | null>(null);
  const [selectedStagePerformer, setSelectedStagePerformer] = useState<
    string | null
  >(null);
  const [selectedStage, setSelectedStage] = useState<string | null>(null);
  const [selectedDealPerformer, setSelectedDealPerformer] = useState<
    string | null
  >(null);
  const [utmFile, setUtmFile] = useState<File | null>(null);

  const handleNextStep = () => {
    setStep((prevState) => prevState + 1);
  };
  const handlePrevStep = () => {
    setStep((prevState) => prevState - 1);
  };

  const steps = useMemo(
    () => [
      {
        title: "Авторизация в аккаунте",
        isSettingsAvailable: false,
        component: <IntegrationStep1 handleNextStep={handleNextStep} />,
      },
      {
        title: "Выбор воронки",
        isSettingsAvailable: true,
        component: (
          <IntegrationStep2
            handlePrevStep={handlePrevStep}
            handleNextStep={handleNextStep}
            selectedFunnelPerformer={selectedFunnelPerformer}
            setSelectedFunnelPerformer={setSelectedFunnelPerformer}
            selectedFunnel={selectedFunnel}
            setSelectedFunnel={setSelectedFunnel}
            performers={performersMock}
            funnels={funnelsMock}
          />
        ),
      },
      {
        title: "Выбор этапа воронки",
        isSettingsAvailable: true,
        component: (
          <IntegrationStep3
            handlePrevStep={handlePrevStep}
            handleNextStep={handleNextStep}
            selectedStagePerformer={selectedStagePerformer}
            setSelectedStagePerformer={setSelectedStagePerformer}
            selectedStage={selectedStage}
            setSelectedStage={setSelectedStage}
            performers={performersMock}
            stages={stagesMock}
          />
        ),
      },
      {
        title: "Сделка",
        isSettingsAvailable: true,
        component: (
          <IntegrationStep4
            handlePrevStep={handlePrevStep}
            handleNextStep={handleNextStep}
            selectedDealPerformer={selectedDealPerformer}
            setSelectedDealPerformer={setSelectedDealPerformer}
            performers={performersMock}
          />
        ),
      },
      {
        title: "Добавление utm-меток",
        isSettingsAvailable: false,
        component: (
          <IntegrationStep5
            handlePrevStep={handlePrevStep}
            handleNextStep={handleNextStep}
            utmFile={utmFile}
            setUtmFile={setUtmFile}
          />
        ),
      },
      {
        title: "Добавление тегов",
        isSettingsAvailable: true,
        component: <IntegrationStep6 handlePrevStep={handlePrevStep} />,
      },
    ],
    [
      utmFile,
      selectedFunnelPerformer,
      selectedFunnel,
      selectedStagePerformer,
      selectedStage,
      selectedDealPerformer,
    ],
  );

  return (
    <Dialog
      open={isModalOpen}
      onClose={handleCloseModal}
      fullWidth
      fullScreen={isMobile}
      PaperProps={{
        sx: {
          maxWidth: isTablet ? "100%" : "920px",
          maxHeight: isTablet ? "100%" : "660px",
          borderRadius: "12px",
        },
      }}
    >
      <Box
        sx={{
          width: "100%",
          height: "68px",
          backgroundColor: theme.palette.background.default,
        }}
      >
        <Typography
          sx={{
            fontSize: isMobile ? "20px" : "24px",
            fontWeight: "500",
            padding: "20px",
          }}
        >
          Интеграция с {companyName ? companyName : "партнером"}
        </Typography>
      </Box>
      <IconButton
        onClick={handleCloseModal}
        sx={{
          width: "12px",
          height: "12px",
          position: "absolute",
          right: "15px",
          top: "15px",
        }}
      >
        <CloseIcon
          sx={{ width: "12px", height: "12px", transform: "scale(1.5)" }}
        />
      </IconButton>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: isTablet ? "100%" : "920px",
          height: "600px",
          padding: "15px 20px 15px",
          flexGrow: 1,
        }}
      >
        <Box sx={{ display: "flex", justifyContent: "space-between" }}>
          <Box>
            <Typography
              sx={{
                fontSize: isMobile ? "18px" : "24px",
                color: "#4D4D4D",
                fontWeight: "400",
                lineHeight: "1",
              }}
            >
              {steps[step].title}
            </Typography>
            <Typography
              sx={{
                color: "#9A9AAF",
                fontWeight: "400",
                marginTop: "4px",
                fontSize: "14px",
                lineHeight: "1",
              }}
            >
              Шаг {step + 1}
            </Typography>
          </Box>
          {steps[step].isSettingsAvailable && (
            <Button
              variant="outlined"
              startIcon={
                <GearIcon
                  color={theme.palette.brightPurple.main}
                  height={"20px"}
                  width={"20px"}
                />
              }
              onClick={() => {}}
              sx={{
                padding: isMobile ? "10px" : "10px 20px",
                width: "fit-content",
                backgroundColor: "transparent",
                color: theme.palette.brightPurple.main,
                "& .MuiButton-startIcon": {
                  marginRight: isMobile ? 0 : "8px",
                  marginLeft: 0,
                },
              }}
            >
              {isMobile ? "" : "Мои настройки"}
            </Button>
          )}
        </Box>
        <Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
      </Box>
    </Dialog>
  );
};