import {Box, Typography, Link, useTheme} from "@mui/material";
import React from "react";
import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
import SwitchAnswerOptions from "./switchAnswerOptions";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import QuestionsPageCard from "../QuestionPageCard";
import {useParams} from "react-router-dom";
import {questionStore} from "@root/questions";
import {answerStore} from "@root/answer";
import CustomTextField from "@ui_kit/CustomTextField";


interface Props {
    totalIndex: number,
}


export default function AnswerOptions({totalIndex}: Props) {
    const params = Number(useParams().quizId);
    const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore()
    const {listAnswer, updateAnswerList, createAnswer, removeAnswer} = answerStore()
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState('setting');
    const SSHC = (data: string) => {
        setSwitchState(data)
    }

    return (
        <>
            <Box sx={{ padding: '20px'}}>
                <Typography
                    sx={{
                        padding: '0 0 33px 80px',
                        fontWeight: 400,
                        fontSize: '18px',
                        lineHeight: '21.33px',
                        color: theme.palette.grey2.main
                    }}
                >
                    Добавьте ответ
                </Typography>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px'}}>
                    <Link
                        component="button"
                        variant="body2"
                        sx={{color: theme.palette.brightPurple.main}}
                         onClick={() => {
                             createAnswer(params, totalIndex)
                         }}
                    >
                        Добавьте ответ
                    </Link>
                    <Typography
                        sx={{
                            fontWeight: 400,
                            fontSize: '18px',
                            lineHeight: '21.33px',
                            color: theme.palette.grey2.main
                        }}
                    >или нажмите Enter</Typography>
                    <EnterIcon/>
                </Box>
                {listAnswer.length === 0 && listAnswer[params] !== undefined &&
                    <Box>
                        {Object.values(listAnswer[params][totalIndex]).map((e, index) => (
                                <CustomTextField key={index} placeholder={'Добавьте ответ'} />
                            )
                        )}
                    </Box>

                }

            </Box>
            <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
            <SwitchAnswerOptions switchState={switchState}/>
        </>
    )
}