import { Box, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";


type SettingEmojiProps = {
    question: QuizQuestionEmoji;
};

export default function SettingEmoji({ question }: SettingEmojiProps) {
    const theme = useTheme();
    const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
    const isTablet = useMediaQuery(theme.breakpoints.down(985));
    const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
    const isMobile = useMediaQuery(theme.breakpoints.down(790));

    const setInnerName = useDebouncedCallback((value) => {
        setQuestionInnerName(question.id, value);
    }, 200);

    return (
        <Box
            sx={{
                display: "flex",
                justifyContent: "space-between",
                flexDirection: isWrappColumn ? "column" : "none",
            }}
        >
            {/* <Box
                sx={{
                    pt: isMobile ? "25px" : "20px",
                    pb: isMobile ? "25px" : "20px",
                    pl: "20px",
                    pr: isFigmaTablte ? (isWrappColumn ? "20px" : "0px") : "0px",
                    display: "flex",
                    flexDirection: "column",
                    gap: "14px",
                    width: "100%",
                }}
            >
                <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
                    Настройки ответов
                </Typography>
                <CustomCheckbox
                    sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
                    label={"Можно несколько"}
                    checked={question.content.multi}
                    dataCy="multiple-answers-checkbox"
                    handleChange={({ target }) => updateQuestion(question.id, question => {
                        if (question.type !== "emoji") return;

                        question.content.multi = target.checked;
                    })}
                />
                <CustomCheckbox
                    sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
                    label={'Вариант "свой ответ"'}
                    checked={question.content.own}
                    handleChange={({ target }) => updateQuestion(question.id, question => {
                        if (question.type !== "emoji") return;

                        question.content.own = target.checked;
                    })}
                />
            </Box> */}
            <Box
                sx={{
                    pt: isMobile ? "0px" : "20px",
                    pb: "20px",
                    pl: "20px",
                    pr: isFigmaTablte ? "30px" : "20px",
                    display: "flex",
                    flexDirection: "column",
                    gap: "14px",
                    width: isMobile ? "auto" : "100%",
                }}
            >
                <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
                    Настройки вопросов
                </Typography>
                <CustomCheckbox
                    sx={{ mr: isMobile ? "0px" : "16px" }}
                    label={"Необязательный вопрос"}
                    checked={!question.content.required}
                    handleChange={({ target }) => updateQuestion<QuizQuestionEmoji>(question.id, question => {
                        if (question.type !== "emoji") return;

                        question.content.required = !target.checked;
                    })}
                />
                {/*<Box*/}
                {/*    sx={{*/}
                {/*        width: isMobile ? "90%" : "auto",*/}
                {/*        display: "flex",*/}
                {/*        alignItems: "center",*/}
                {/*    }}*/}
                {/*>*/}
                {/*    <CustomCheckbox*/}
                {/*        sx={{*/}
                {/*            mr: isMobile ? "0px" : "16px",*/}
                {/*            height: isMobile ? "100%" : "26px",*/}
                {/*            alignItems: isMobile ? "flex-start" : "center",*/}
                {/*        }}*/}
                {/*        label={"Внутреннее название вопроса"}*/}
                {/*        checked={question.content.innerNameCheck}*/}
                {/*        handleChange={({ target }) => updateQuestion<QuizQuestionEmoji>(question.id, question => {*/}
                {/*            question.content.innerNameCheck = target.checked;*/}
                {/*            question.content.innerName = target.checked ? question.content.innerName : "";*/}
                {/*        })}*/}
                {/*    />*/}
                {/*    <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">*/}
                {/*        <Box>*/}
                {/*            <InfoIcon />*/}
                {/*        </Box>*/}
                {/*    </Tooltip>*/}
                {/*</Box>*/}
                {/*{question.content.innerNameCheck && (*/}
                {/*    <CustomTextField*/}
                {/*        placeholder={"Развёрнутое описание вопроса"}*/}
                {/*        text={question.content.innerName}*/}
                {/*        onChange={({ target }) => setInnerName(target.value)}*/}
                {/*    />*/}
                {/*)}*/}
            </Box>
        </Box>
    );
}