import { QuestionType } from "@model/question/question";
import { Box } from "@mui/material";
import { createTypedQuestion } from "@root/questions/actions";
import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
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 Emoji from "../../assets/icons/questionsPage/emoji";
import Input from "../../assets/icons/questionsPage/input";
import OptionsAndPict from "../../assets/icons/questionsPage/options_and_pict";
import OptionsPict from "../../assets/icons/questionsPage/options_pict";
import Page from "../../assets/icons/questionsPage/page";
import RatingIcon from "../../assets/icons/questionsPage/rating";
import Slider from "../../assets/icons/questionsPage/slider";
import type {
    UntypedQuizQuestion,
} from "../../model/questionTypes/shared";

interface Props {
    question: UntypedQuizQuestion;
}

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

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

    return (
        <Box
            sx={{
                display: "flex",
                flexWrap: "wrap",
                gap: "20px",
                padding: "8px 20px 20px",
            }}
        >
            {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
                <QuestionsMiniButton
                    key={title}
                    dataCy={`select-questiontype-${value}`}
                    onClick={() => createTypedQuestion(question.id, value)}
                    icon={icon}
                    text={title}
                />
            ))}
        </Box>
    );
}

export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [
    {
        icon: <Answer color="#9A9AAF" />,
        title: "Варианты ответов",
        value: "variant",
    },
    {
        icon: <OptionsPict color="#9A9AAF" />,
        title: "Варианты с картинками",
        value: "images",
    },
    {
        icon: <OptionsAndPict color="#9A9AAF" />,
        title: "Варианты и картинка",
        value: "varimg",
    },
    {
        icon: <Emoji color="#9A9AAF" />,
        title: "Эмоджи",
        value: "emoji",
    },
    {
        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",
    },
    {
        icon: <Page color="#9A9AAF" />,
        title: "Страница",
        value: "page",
    },
    {
        icon: <RatingIcon color="#9A9AAF" />,
        title: "Рейтинг",
        value: "rating",
    },
];
