import {Box, Typography} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import InfoIcon from "../../../assets/icons/InfoIcon";
import * as React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import {useParams} from "react-router-dom";
import {questionStore, updateQuestionsList} from "@root/questions";

interface Props {
    totalIndex: number,
}

export default function ResponseSettings({totalIndex}: Props) {
    const params = Number(useParams().quizId);
    const {listQuestions} = questionStore()
    const [checked, setChecked] = React.useState([true, false]);
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setChecked([checked[0], event.target.checked, ]);
    };

    return (
        <Box sx={{display: 'flex'}}>
            <Box sx={{padding: '20px', display: 'flex', flexDirection: "column"}}>
                <Typography>Настройки ответов</Typography>
                <CustomCheckbox label={'Длинный текстовый ответ'}/>
                <CustomCheckbox label={'Можно несколько'}
                                checked={listQuestions[totalIndex].content.multi}
                                handleChange={(e) => {
                                    let clonContent = listQuestions[totalIndex].content
                                    clonContent.multi = e.target.checked
                                    updateQuestionsList( totalIndex, {content: clonContent})
                                }}
                />
                <CustomCheckbox label={'Вариант "свой ответ"'}
                                checked={listQuestions[totalIndex].content.own}
                                handleChange={(e) => {
                                    let clonContent = listQuestions[totalIndex].content
                                    clonContent.own = e.target.checked
                                    updateQuestionsList(totalIndex, {content: clonContent})
                                }}
                />
            </Box>
            <Box sx={{padding: '20px', display: 'flex', flexDirection: "column"}}>
                <Typography>Настройки вопросов</Typography>
                <CustomCheckbox label={'Необязательный вопрос'} checked={!(listQuestions[totalIndex].required)}
                                handleChange={(e) => {
                                    updateQuestionsList(totalIndex, {required: !e.target.checked})
                                    console.log(listQuestions[totalIndex].required)}}/>
                <Box sx={{display: "flex"}}>
                    <CustomCheckbox label={'Внутреннее название вопроса'} checked={checked[1]} handleChange={handleChange}/> <InfoIcon />
                </Box>
                {checked[1] ?
                    <CustomTextField placeholder={"Развёрнутое описание вопроса"} text={listQuestions[totalIndex].description}
                                     onChange={e => updateQuestionsList(totalIndex, {description: e.target.value})}/>
                    :
                    <></>
                }
            </Box>
        </Box>
    );
};