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

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

export const AmoQuestions: FC<Props> = ({
  questionsItems,
  selectedQuestions,
  handleAddQuestion,
  handlePrevStep,
  handleNextStep,
}) => {
  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
    handleAddQuestion(activeScope, selectedQuestion, "question")
  }

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        height: "100%",
        flexGrow: 1,
      }}
    >
      {isSelection && activeScope !== null ? (
        // Здесь выбираем элемент в табличку
        <ItemsSelectionView
          items={questionsItems}
          setSelectedItem={setSelectedQuestion}
          onSmallBtnClick={() => {
            setActiveScope(null);
            setIsSelection(false);
          }}
          onLargeBtnClick={() => {
            handleAdd();
            setActiveScope(null);
            setIsSelection(false);
          }}
        />
      ) : (
        // Табличка
        <ItemDetailsView
          setActiveScope={setActiveScope}
          selectedQuestions={selectedQuestions}
          setIsSelection={setIsSelection}
          handleLargeBtn={handleNextStep}
          handleSmallBtn={handlePrevStep}
        />
      )}
    </Box>
  );
};