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 { QuizQuestionSelect } from "../../../model/questionTypes/select";


type SettingDropDownProps = {
    question: QuizQuestionSelect;
};

export default function SettingDropDown({ question }: SettingDropDownProps) {
    const theme = useTheme();
    const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
    const isMobile = useMediaQuery(theme.breakpoints.down(790));

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

    const debounceAnswer = useDebouncedCallback((value) => {
        updateQuestion(question.id, question => {
            if (question.type !== "select") return;

            question.content.default = value;
        });
    }, 200);

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

                                question.content.multi = target.checked;
                            })
                        }
                    />
                    <Box
                        sx={{
                            display: isMobile ? "none" : "block",
                            mt: isMobile ? "11px" : "6px",
                        }}
                    >
                        <Typography
                            sx={{
                                height: isMobile ? "18px" : "auto",
                                fontWeight: "500",
                                fontSize: "18px",
                                color: " #4D4D4D",
                                mb: "14px",
                            }}
                        >
                            Текст в выпадающем списке
                        </Typography>
                        <CustomTextField
                            placeholder={"Выберите вариант"}
                            text={question.content.default}
                            onChange={({ target }) => debounceAnswer(target.value)}
                        />
                    </Box>
                </Box>
                <Box
                    sx={{
                        pt: isMobile ? "0px" : "20px",
                        pb: "20px",
                        pl: isFigmaTablte ? (isMobile ? "20px" : "30px") : "0px",
                        pr: isFigmaTablte ? "19px" : "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
                        label={"Необязательный вопрос"}
                        checked={!question.required}
                        handleChange={(e) => {
                            updateQuestion(question.id, question => {
                                question.required = !e.target.checked;
                            });
                        }}
                    />
                    <Box sx={{ position: "relative", display: "flex", alignItems: "flex-start" }}>
                        <CustomCheckbox
                            sx={{ height: isMobile ? "100%" : "26px", alignItems: isMobile ? "flex-start" : "center" }}
                            label={"Внутреннее название вопроса"}
                            checked={question.content.innerNameCheck}
                            handleChange={({ target }) => {
                                updateQuestion(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>
                    <Box
                        sx={{
                            width: "100%",
                            pt: "20px",
                            display: isMobile ? "block" : "none",
                        }}
                    >
                        <Typography
                            sx={{
                                height: isMobile ? "18px" : "auto",
                                fontWeight: "500",
                                fontSize: "18px",
                                color: " #4D4D4D",
                                mb: "10px",
                            }}
                        >
                            Текст в выпадающем списке
                        </Typography>
                        <CustomTextField
                            placeholder={"Выберите вариант"}
                            text={question.content.default}
                            onChange={({ target }) => debounceAnswer(target.value)}
                        />
                    </Box>
                    {question.content.innerNameCheck && (
                        <CustomTextField
                            placeholder={"Развёрнутое описание вопроса"}
                            text={question.content.innerName}
                            onChange={({ target }) => debounced(target.value)}
                        />
                    )}
                </Box>
            </Box>
        </>
    );
}