import { Box, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomTextField from "@ui_kit/CustomTextField";
import { useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionText } from "../../../model/questionTypes/text";
import ButtonsOptions from "../ButtonsOptions";
import SwitchTextField from "./switchTextField";


interface Props {
    question: QuizQuestionText;
}

export default function OwnTextField({ question }: Props) {
    const [switchState, setSwitchState] = useState("setting");
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));

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

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

    const SSHC = (data: string) => {
        setSwitchState(data);
    };

    return (
        <>
            <Box
                sx={{
                    width: "auto",
                    maxWidth: "745px",
                    display: "flex",
                    pb: "20px",
                    pl: "20px",
                    pr: "20px",
                    flexDirection: "column",
                    gap: isMobile ? "15px" : "20px",
                }}
            >
                <CustomTextField
                    placeholder={"Пример ответа"}
                    text={question.content.placeholder}
                    onChange={({ target }) => setPlaceholder(target.value)}
                    sx={{ maxWidth: isFigmaTablte ? "549px" : "640px", width: "100%", mt: isMobile ? "15px" : "0px" }}
                />
                <Box sx={{ display: "flex", alignItems: isMobile ? "flex-start" : "center", gap: "12px" }}>
                    <Typography
                        sx={{
                            fontWeight: 400,
                            fontSize: "16px",
                            lineHeight: "18.96px",
                            color: theme.palette.grey2.main,
                        }}
                    >
                        Пользователю будет дано поле для ввода значения
                    </Typography>
                    <Tooltip title="Будет использоваться для ввода значения." placement="top">
                        <Box>
                            <InfoIcon />
                        </Box>
                    </Tooltip>
                </Box>
            </Box>
            <ButtonsOptions switchState={switchState} SSHC={SSHC} question={question} />
            <SwitchTextField switchState={switchState} question={question} />
        </>
    );
}