import { useTheme } from "@mui/material";
import {
  Dispatch,
  FC,
  SetStateAction,
  useCallback,
  useMemo,
  useState,
} from "react";
import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView";
import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView";
import { TagQuestionObject, TitleKeys, TQuestionEntity } from "../AmoCRMModal";
import Box from "@mui/material/Box";
import type { AllTypesQuestion } from "@model/questionTypes/shared"
import { getQuestionById } from "@/stores/questions/actions";
import { useQuestionsStore } from "@/stores/questions/store";

type Props = {
  handlePrevStep: () => void;
  handleNextStep: () => void;
  questionEntity: TQuestionEntity;
  setQuestionEntity: Dispatch<SetStateAction<TQuestionEntity>>;
  questions: AllTypesQuestion[];
};

export const AmoStep7: FC<Props> = ({
  handlePrevStep,
  handleNextStep,
  questionEntity,
  setQuestionEntity,
  questions,
}) => {
  const theme = useTheme();
  const [isSelection, setIsSelection] = useState<boolean>(false);
  const [activeItem, setActiveItem] = useState<string | null>(null);
  const [selectedValue, setSelectedValue] = useState<string | null>(null);

  const handleAdd = useCallback(() => {
    if (!activeItem || !selectedValue) return;

    setQuestionEntity((prevState) => ({
      ...prevState,
      [activeItem]: [...prevState[activeItem as TitleKeys], Number(selectedValue)],
    }));
  }, [activeItem, setQuestionEntity, selectedValue]);

  const items: TagQuestionObject[] = useMemo(
    () => Object.values(questions)
      .filter(({ type }) =>
        type !== "result"
        && type !== null)
      .map(({ backendId, title }) => ({
        backendId: backendId,
        title
      })),
    [],
  );
  const translatedQuestionEntity = useMemo(() => {
    const translated = {} as TQuestionEntity;

    for (let key in questionEntity) {
      translated[key] = questionEntity[key].map((id) => 
      questions.find((q) => q.backendId === Number(id))?.title || id
      )
    }

    console.log("questionEntity", questionEntity)
    console.log("translated", translated)
    return translated
  },
    [questionEntity],
  )

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        height: "100%",
        flexGrow: 1,
      }}
    >
      {isSelection ? (
        <ItemsSelectionView
          items={items}
          type="typeQuestions"
          selectedValue={selectedValue}
          setSelectedValue={setSelectedValue}
          onSmallBtnClick={() => {
            setActiveItem(null);
            setIsSelection(false);
          }}
          onLargeBtnClick={() => {
            handleAdd();
            setActiveItem(null);
            setIsSelection(false);
          }}
        />
      ) : (
        <ItemDetailsView
          setIsSelection={setIsSelection}
          handleLargeBtn={handleNextStep}
          handleSmallBtn={handlePrevStep}
          questionEntity={translatedQuestionEntity}
          setActiveItem={setActiveItem}
        />
      )}
    </Box>
  );
};