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

type MinifiedData = {
  id: string;
  title: string;
  subTitle?: string;
};
type Props = {
  questionsItems: MinifiedData[] | [];
  selectedQuestions: SelectedQuestions;
  handleAddQuestion: (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => void;
  openDelete: (data: TagQuestionHC) => void;
  handlePrevStep: () => void;
  handleNextStep: () => void;
};

export const AmoQuestions: FC<Props> = ({
  questionsItems,
  selectedQuestions,
  handleAddQuestion,
  handlePrevStep,
  handleNextStep,
  openDelete,
}) => {
  const [isSelection, setIsSelection] = useState<boolean>(false);
  const [activeScope, setActiveScope] = useState<QuestionKeys | null>(null);
  const [selectedQuestion, setSelectedQuestion] = useState<string | null>(null);

  const handleAdd = () => {
    if (activeScope === null || selectedQuestion === null) return;
    setActiveScope(null);
    handleAddQuestion(activeScope, selectedQuestion, "question");
  };
  const handleDelete = (id: string, scope: QuestionKeys) => {
    openDelete({
      id,
      scope,
      type: "question",
    });
  };

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        height: "100%",
        flexGrow: 1,
      }}
    >
      {isSelection && activeScope !== null ? (
        <EntitiesQuestions

          items={questionsItems}
          selectedItemId={selectedQuestion}
          setSelectedItem={setSelectedQuestion}
          onSmallBtnClick={() => {
            setActiveScope(null);
            setIsSelection(false);
          }}
          onLargeBtnClick={() => {
            handleAdd();
            setActiveScope(null);
            setIsSelection(false);
          }}
        />
        // Здесь выбираем элемент в табличку
        // <ItemsSelectionView
        //   items={questionsItems}
        //   selectedItemId={selectedQuestion}
        //   setSelectedItem={setSelectedQuestion}
        //   onSmallBtnClick={() => {
        //     setActiveScope(null);
        //     setIsSelection(false);
        //   }}
        //   onLargeBtnClick={() => {
        //     handleAdd();
        //     setActiveScope(null);
        //     setIsSelection(false);
        //   }}
        // />
      ) : (
        // Табличка
        <ItemDetailsView
          items={questionsItems}
          setActiveScope={setActiveScope}
          selectedQuestions={selectedQuestions}
          setIsSelection={setIsSelection}
          handleLargeBtn={handleNextStep}
          handleSmallBtn={handlePrevStep}
          deleteHC={handleDelete}
        />
      )}
    </Box>
  );
};