import {
    Box,
    Tooltip,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
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 { QuizQuestionPage } from "../../../model/questionTypes/page";
import { setQuestionInnerName, updateQuestionWithFnOptimistic } from "@root/questions/actions";


type SettingPageOptionsProps = {
    question: QuizQuestionPage;
};

export default function SettingPageOptions({
    question,
}: SettingPageOptionsProps) {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(790));

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

    return (
        <Box
            sx={{
                boxSizing: "border-box",
                pt: isMobile ? "25px" : "20px",
                pb: isMobile ? "25px" : "20px",
                pl: "20px",
                pr: "20px",
                display: "flex",
                flexDirection: "column",
                gap: "14px",
                width: isMobile ? "auto" : "100%",
            }}
        >
            <Typography
                sx={{
                    height: isMobile ? "18px" : "auto",
                    fontWeight: "500",
                    fontSize: "18px",
                    color: " #4D4D4D",
                }}
            >
                Настройки вопроса
            </Typography>
            <Box sx={{ display: "flex", alignItems: "flex-start" }}>
                <CustomCheckbox
                    sx={{
                        mr: isMobile ? "0px" : "16px",
                        height: isMobile ? "100%" : "26px",
                    }}
                    label={"Внутреннее название вопроса"}
                    checked={question.content.innerNameCheck}
                    handleChange={({ target }) =>
                        updateQuestionWithFnOptimistic(question.id, question => {
                            question.content.innerNameCheck = 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>
    );
}