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

import { FC, useMemo, useState } from "react";
import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView";
import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView";
import { Box } from "@mui/material";
import { MinifiedData, QuestionKeys, SelectedQuestions, TagKeys, TagQuestionHC } from "../types";
import { EntitiesQuestions } from "./EntitiesQuestions";

type Props = {
  selectedCurrentFields: MinifiedData[] | [];
  questionsItems: MinifiedData[] | [];
  fieldsItems: MinifiedData[] | [];
  selectedQuestions: SelectedQuestions;
  handleAddQuestion: (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => void;
  openDelete: (data: TagQuestionHC) => void;
  handlePrevStep: () => void;
  handleNextStep: () => void;
  FieldsAllowedFC: MinifiedData[]
  setSelectedCurrentFields: (value: MinifiedData[]) => void;
};
export type QuestionPair = {
  question: string,
  field: string
}

export const AmoQuestions: FC<Props> = ({
  selectedCurrentFields,
  questionsItems,
  fieldsItems,
  selectedQuestions,
  handleAddQuestion,
  handlePrevStep,
  handleNextStep,
  openDelete,
  FieldsAllowedFC,
  setSelectedCurrentFields
}) => {
  console.log("selectedCurrentFields")
  console.log(selectedCurrentFields)
  console.log("selectedQuestions")
  console.log(selectedQuestions)
  const [isSelection, setIsSelection] = useState<boolean>(false);
  const [activeScope, setActiveScope] = useState<QuestionKeys | null>(null);
  const [selectedQuestion, setSelectedQuestion] = useState<string | null>(null);
  const [selectedField, setSelectedField] = useState<string | null>(null);

  const [isCurrentFields, setIsCurrentFields] = useState(true);

  const handleAddNewField = () => {
    if (activeScope === null || selectedQuestion === null) return;
    setActiveScope(null);
    handleAddQuestion(activeScope, selectedQuestion, "question");
  };
  const handleAddCurrentField = () => {
    if (activeScope === null || selectedField === null || selectedQuestion === null || selectedCurrentFields.some(e => e.id === selectedQuestion)) return;
    setActiveScope(null);
    setSelectedCurrentFields((old) => {
      console.log(old)
      return (
        [...old, {
          id: selectedQuestion,
          title: questionsItems.find(e => e.id === selectedQuestion)?.title,
          entity: activeScope,
          subTitle: selectedField
        }]
      )
    });
  };

  const handleAdd = () => {
    console.log(activeScope, selectedQuestion)
    if (isCurrentFields) {
      console.log("добавляю текущее поле")
      handleAddCurrentField()
    } else {
      console.log("добавляю новое поле")
      handleAddNewField()
    }
  }

  const handleDelete = (id: string, scope: QuestionKeys) => {
    openDelete({
      id,
      scope,
      type: "question",
    });
  };
  const SCFworld = useMemo(() => {
    const obj = {
      Lead: [],
      Company: [],
      Customer: [],
      Contact: []
    }
    selectedCurrentFields.forEach((e) => {
      if (!obj[e.entity]?.includes(e.id)) {
        obj[e.entity].push(e.id)
      }
    })
    return obj
  }, [selectedCurrentFields])

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        height: "100%",
        flexGrow: 1,
      }}
    >
      {isSelection && activeScope !== null ? (
        <EntitiesQuestions
          FieldsAllowedFC={FieldsAllowedFC}
          fieldsItems={fieldsItems}
          items={questionsItems}
          selectedItemId={selectedQuestion}
          setSelectedQuestion={setSelectedQuestion}
          selectedField={selectedField}
          setSelectedField={setSelectedField}
          onSmallBtnClick={() => {
            setActiveScope(null);
            setIsSelection(false);
          }}
          onLargeBtnClick={() => {
            handleAdd();
            setActiveScope(null);
            setIsSelection(false);
          }}
          activeScope={activeScope}
          setIsCurrentFields={setIsCurrentFields}
          isCurrentFields={isCurrentFields}
        />
        // Здесь выбираем элемент в табличку
        // <ItemsSelectionView
        //   items={questionsItems}
        //   selectedItemId={selectedQuestion}
        //   setSelectedItem={setSelectedQuestion}
        //   onSmallBtnClick={() => {
        //     setActiveScope(null);
        //     setIsSelection(false);
        //   }}
        //   onLargeBtnClick={() => {
        //     handleAdd();
        //     setActiveScope(null);
        //     setIsSelection(false);
        //   }}
        // />
      ) : (
        // Табличка
        <ItemDetailsView
          items={[...questionsItems, ...FieldsAllowedFC]}
          setActiveScope={setActiveScope}
          selectedQuestions={{
            Lead: [...selectedQuestions.Lead, ...SCFworld.Lead],
            Company: [...selectedQuestions.Company, ...SCFworld.Company],
            Customer: [...selectedQuestions.Customer, ...SCFworld.Customer],
            Contact: [...selectedQuestions.Contact, ...SCFworld.Contact]
          }}
          setIsSelection={setIsSelection}
          handleLargeBtn={handleNextStep}
          handleSmallBtn={handlePrevStep}
          deleteHC={handleDelete}
        />
      )}
    </Box>
  );
};