import { FC, useState } from "react";
import { Dialog, IconButton, Typography, useMediaQuery, useTheme, Box, Skeleton } from "@mui/material";
import { useQuestions } from "@/stores/questions/hooks";
import { redirect } from "react-router-dom";

import CloseIcon from "@mui/icons-material/Close";

import { useBitrixIntegration } from "./useBitrixIntegration";
import { MinifiedData } from "./types";
import { Quiz } from "@/model/quiz/quiz";
import { SwitchPages } from "./SwitchPages";

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

export const BitrixModal: FC<IntegrationsModalProps> = ({ isModalOpen, handleCloseModal, companyName, quiz }) => {

  //Если нет контекста квиза, то и делать на этой страничке нечего
  if (quiz.backendId === undefined) {
    redirect("/list");
    return null;
  }

  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  const { questions } = useQuestions();

  const [isTryRemoveAccount, setIsTryRemoveAccount] = useState<boolean>(false);

  const {
    isLoadingPage,
    firstRules,
    accountInfo,
    arrayOfPipelines,
    arrayOfPipelinesSteps,
    arrayOfUsers,
    arrayOfTags,
    arrayOfFields,
    selectedPipeline,
    setSelectedPipeline,
    selectedCurrentFields,
    selectedPipelineStep,
    setSelectedPipelineStep,
    selectedDealUser,
    setSelectedDealPerformer,
    questionsBackend,
    selectedTags,
    setSelectedTags,
    selectedQuestions,
    setSelectedQuestions,
    setPageOfPipelines,
    setPageOfPipelinesSteps,
    setPageOfUsers,
    setPageOfTags,
    setPageOfFields,
    setSelectedCurrentFields,
    leadFlag,
    leadFlagHC,
    fullArrayOfPipelinesSteps
  } = useBitrixIntegration({
    quizID: quiz.backendId,
    isModalOpen,
    isTryRemoveAccount,
    questions
  });

  return (
    <Dialog
      open={isModalOpen}
      onClose={handleCloseModal}
      fullWidth
      // fullScreen={isMobile}
      PaperProps={{
        sx: {
          maxWidth: isTablet ? "100%" : "919px",
          height: "658px",
          borderRadius: "12px",
        },
      }}
    >
      <Box>
        <Box
          sx={{
            width: "100%",
            height: "68px",
            backgroundColor: theme.palette.background.default,
          }}
        >
          <Typography
            sx={{
              fontSize: isMobile ? "20px" : "24px",
              fontWeight: "500",
              padding: "20px",
              color: theme.palette.grey2.main,
            }}
          >
            Интеграция с {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>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          padding: "15px 20px 15px",
          flexGrow: 1,
          height: "100%",
          overflow: "auto"
        }}
      >
        {isLoadingPage ?
          <Skeleton
            sx={{
              width: "100%",
              height: "100%",
              transform: "none",
            }}
          /> :
          <SwitchPages
            quiz={quiz}
            questions={questions}
            firstRules={firstRules}
            accountInfo={accountInfo}
            arrayOfPipelines={arrayOfPipelines}
            arrayOfPipelinesSteps={arrayOfPipelinesSteps}
            arrayOfUsers={arrayOfUsers}
            arrayOfTags={arrayOfTags}
            arrayOfFields={arrayOfFields}
            selectedPipeline={selectedPipeline}
            setSelectedPipeline={setSelectedPipeline}
            selectedCurrentFields={selectedCurrentFields}
            selectedPipelineStep={selectedPipelineStep}
            setSelectedPipelineStep={setSelectedPipelineStep}
            selectedDealUser={selectedDealUser}
            setSelectedDealPerformer={setSelectedDealPerformer}
            selectedTags={selectedTags}
            setSelectedTags={setSelectedTags}
            selectedQuestions={selectedQuestions}
            setSelectedQuestions={setSelectedQuestions}
            setPageOfPipelines={setPageOfPipelines}
            setPageOfPipelinesSteps={setPageOfPipelinesSteps}
            setPageOfUsers={setPageOfUsers}
            setPageOfTags={setPageOfTags}
            setPageOfFields={setPageOfFields}
            setSelectedCurrentFields={setSelectedCurrentFields}
            handleCloseModal={handleCloseModal}
            leadFlag={leadFlag}
            leadFlagHC={leadFlagHC}
            fullArrayOfPipelinesSteps={fullArrayOfPipelinesSteps}
          />
        }
      </Box>
    </Dialog>
  );
};

export const diffArr = (arr_A: MinifiedData[], arr_B: MinifiedData[]) => {
  return arr_A.filter(person_A => !arr_B.some(person_B => person_A.id === person_B.id));
}