import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
import Answer from "../../assets/icons/questionsPage/answer";
import OptionsPict from "../../assets/icons/questionsPage/options_pict";
import OptionsAndPict from "../../assets/icons/questionsPage/options_and_pict";
import Emoji from "../../assets/icons/questionsPage/emoji";
import Input from "../../assets/icons/questionsPage/input";
import DropDown from "../../assets/icons/questionsPage/drop_down";
import Date from "../../assets/icons/questionsPage/date";
import Slider from "../../assets/icons/questionsPage/slider";
import Download from "../../assets/icons/questionsPage/download";
import Page from "../../assets/icons/questionsPage/page";
import RatingIcon from "../../assets/icons/questionsPage/rating";
import {Box, useTheme} from "@mui/material";
import React from "react";
import {useParams} from "react-router-dom";
import {questionStore, updateQuestionsList} from "@root/questions";

interface Props {
    totalIndex: number
}

export default function TypeQuestions({totalIndex }: Props) {
    const theme = useTheme()
    const params = Number(useParams().quizId);
    const {listQuestions} = questionStore()
    const switchState = listQuestions[totalIndex].type
    const buttonTypeQuestions: { icon: JSX.Element; title: string; value: string }[] = [
        {
            icon: <Answer color={theme.palette.grey2.main}/>,
            title: 'Варианты ответов',
            value: 'variant',
        },
        {
            icon: <OptionsPict color={theme.palette.grey2.main}/>,
            title: 'Варианты с картинками',
            value: 'images',
        },
        {
            icon: <OptionsAndPict color={theme.palette.grey2.main}/>,
            title: 'Варианты и картинка',
            value: 'varimg',
        },
        {
            icon: <Emoji color={theme.palette.grey2.main}/>,
            title: 'Эмоджи',
            value: 'emoji',
        },
        {
            icon: <Input color={theme.palette.grey2.main}/>,
            title: 'Своё поле для ввода',
            value: 'text',
        },
        {
            icon: <DropDown color={theme.palette.grey2.main}/>,
            title: 'Выпадающий список',
            value: 'select',
        },
        {
            icon: <Date color={theme.palette.grey2.main}/>,
            title: 'Дата',
            value: 'date',
        },
        {
            icon: <Slider color={theme.palette.grey2.main}/>,
            title: 'Ползунок',
            value: 'number',
        },
        {
            icon: <Download color={theme.palette.grey2.main}/>,
            title: 'Загрузка файла',
            value: 'file',
        },
        {
            icon: <Page color={theme.palette.grey2.main}/>,
            title: 'Страница',
            value: 'page',
        },
        {
            icon: <RatingIcon color={theme.palette.grey2.main}/>,
            title: 'Рейтинг',
            value: 'rating',
        },
    ];
    return (
        <Box sx={{display: 'flex', flexWrap: 'wrap', gap: '20px', padding: '8px 20px 20px'}}>

            {buttonTypeQuestions.map(({ icon, title, value }) => (
                <QuestionsMiniButton
                    key={title}
                    onClick={() => {
                        console.log(value)
                        updateQuestionsList(totalIndex, {type: value})
                    }}
                    icon={icon}
                    text={title}
                />
            ))}
        </Box>
    )
}
