import { Box } from "@mui/material";

import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
import { BUTTON_TYPE_QUESTIONS } from "../TypeQuestions";

import Answer from "../../../assets/icons/questionsPage/answer";
import Date from "../../../assets/icons/questionsPage/date";
import Download from "../../../assets/icons/questionsPage/download";
import DropDown from "../../../assets/icons/questionsPage/drop_down";
import Input from "../../../assets/icons/questionsPage/input";
import Slider from "../../../assets/icons/questionsPage/slider";

import { QuestionType } from "@model/question/question";
import { createTypedQuestion } from "@root/questions/actions";
import type {
    UntypedQuizQuestion
} from "../../../model/questionTypes/shared";


type ButtonTypeQuestion = {
  icon: JSX.Element;
  title: string;
  value: QuestionType;
};

const BUTTON_TYPE_SHORT_QUESTIONS: ButtonTypeQuestion[] = [
  {
    icon: <Answer color="#9A9AAF" />,
    title: "Варианты ответов",
    value: "variant",
  },
  {
    icon: <Input color="#9A9AAF" />,
    title: "Своё поле для ввода",
    value: "text",
  },
  {
    icon: <DropDown color="#9A9AAF" />,
    title: "Выпадающий список",
    value: "select",
  },
  {
    icon: <Date color="#9A9AAF" />,
    title: "Дата",
    value: "date",
  },
  {
    icon: <Slider color="#9A9AAF" />,
    title: "Ползунок",
    value: "number",
  },
  {
    icon: <Download color="#9A9AAF" />,
    title: "Загрузка файла",
    value: "file",
  },
];

interface Props {
  question: UntypedQuizQuestion;
}

export default function FormTypeQuestions({ question }: Props) {

  return (
    <Box>
      <Box
        sx={{
          display: "flex",
          flexWrap: "wrap",
          gap: "20px",
          margin: "20px",
        }}
      >
        {(true /* TODO только первый вопрос */
          ? BUTTON_TYPE_QUESTIONS
          : BUTTON_TYPE_SHORT_QUESTIONS
        ).map(({ icon, title, value: questionType }) => (
          <QuestionsMiniButton
            key={title}
            onClick={() => {
              createTypedQuestion(question.id, questionType);
            }}
            icon={icon}
            text={title}
          />
        ))}
      </Box>
    </Box>
  );
}
