import {
    Box,
    FormControl,
    FormControlLabel,
    Radio,
    RadioGroup,
    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 CheckedIcon from "@ui_kit/RadioCheck";
import CheckIcon from "@ui_kit/RadioIcon";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionText } from "../../../model/questionTypes/text";


type SettingTextFieldProps = {
    question: QuizQuestionText;
};

type Answer = {
    name: string;
    value: "single" | "multi";
};

const ANSWER_TYPES: Answer[] = [
    { name: "Однострочное", value: "single" },
    { name: "Многострочное", value: "multi" },
];

export default function SettingTextField({
    question,
}: SettingTextFieldProps) {
    const theme = useTheme();
    const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));

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

    return (
        <Box
            sx={{
                display: "flex",
                justifyContent: "space-between",
                flexDirection: isWrappColumn ? "column" : null,
                marginRight: isFigmaTablte ? "0px" : "32px",
            }}
        >
            {/* <Box
                sx={{
                    pt: isMobile ? "25px" : "20px",
                    pb: isMobile ? "25px" : "20px",
                    pl: "20px",
                }}
            >
                <Typography
                    sx={{
                        fontWeight: "500",
                        fontSize: "18px",
                        color: " #4D4D4D",
                        marginBottom: "14px",
                    }}
                >
                    Настройки ответов
                </Typography>
                <FormControl>
                    <RadioGroup
                        sx={{
                            display: "flex",
                            flexDirection: "column",
                            gap: "14px",
                            width: "100%",
                        }}
                        aria-labelledby="demo-controlled-radio-buttons-group"
                        name="controlled-radio-buttons-group"
                        value={ANSWER_TYPES.findIndex(
                            ({ value }) => question.content.answerType === value
                        )}
                        onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
                            updateQuestion(question.id, question => {
                                if (question.type !== "text") return;

                                question.content.answerType = ANSWER_TYPES[Number(target.value)].value;
                            });
                        }}
                    >
                        {ANSWER_TYPES.map(({ name }, index) => (
                            <FormControlLabel
                                key={index}
                                sx={{
                                    height: "26px",
                                    color: theme.palette.grey2.main,
                                    "& .MuiRadio-root": { padding: "8px 9px" },
                                }}
                                value={index}
                                control={
                                    <Radio icon={<CheckIcon />} checkedIcon={<CheckedIcon />} />
                                }
                                label={name}
                            />
                        ))}
                    </RadioGroup>
                </FormControl>
                <CustomCheckbox
                    sx={{
                        display: isMobile ? "flex" : "block",
                        mr: isMobile ? "0px" : "16px",
                        marginTop: "15px",
                        alignItems: isMobile ? "flex-end" : "center",
                    }}
                    label={"Только числа"}
                    checked={question.content.onlyNumbers}
                    handleChange={({ target }) => {
                        updateQuestion(question.id, question => {
                            if (question.type !== "text") return;

                            question.content.onlyNumbers = target.checked;
                        });
                    }}
                />
            </Box> */}
            <Box
                sx={{
                    pt: isMobile ? "0px" : "20px",
                    pb: "20px",
                    pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
                    pr: "20px",
                    display: "flex",
                    flexDirection: "column",
                    gap: "14px",
                }}
            >
                <Typography
                    sx={{
                        height: isMobile ? "18px" : "auto",
                        fontWeight: "500",
                        fontSize: "18px",
                        color: " #4D4D4D",
                    }}
                >
                    Настройки вопросов
                </Typography>
                {/* <CustomCheckbox
                    sx={{
                        display: isMobile ? "flex" : "block",
                        mr: isMobile ? "0px" : "16px",
                        alignItems: isMobile ? "flex-end" : "center",
                    }}
                    label={"Автозаполнение адреса"}
                    checked={question.content.autofill}
                    handleChange={({ target }) => {
                        updateQuestion(question.id, question => {
                            question.content.autofill = target.checked;
                        });
                    }}
                /> */}
                <CustomCheckbox
                    sx={{
                        display: isMobile ? "flex" : "block",
                        mr: isMobile ? "0px" : "16px",
                        alignItems: isMobile ? "flex-end" : "center",
                    }}
                    label={"Необязательный вопрос"}
                    checked={!question.content.required}
                    handleChange={(e) => {
                        updateQuestion<QuizQuestionText>(question.id, question => {
                            question.content.required = !e.target.checked;
                        });
                    }}
                />
                {/*<Box*/}
                {/*    sx={{*/}
                {/*        width: isMobile ? "90%" : "auto",*/}
                {/*        display: "flex",*/}
                {/*        alignItems: "center",*/}
                {/*    }}*/}
                {/*>*/}
                {/*    <CustomCheckbox*/}
                {/*        sx={{*/}
                {/*            alignItems: isMobile ? "flex-start" : "center",*/}
                {/*            display: isMobile ? "flex" : "block",*/}
                {/*            mr: isMobile ? "0px" : "16px",*/}
                {/*            height: isMobile ? "100%" : "26px",*/}
                {/*        }}*/}
                {/*        label={"Внутреннее название вопроса"}*/}
                {/*        checked={question.content.innerNameCheck}*/}
                {/*        handleChange={({ target }) => {*/}
                {/*            updateQuestion<QuizQuestionText>(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 }) => debounced(target.value)}*/}
                {/*    />*/}
                {/*)}*/}
            </Box>
        </Box>
    );
}