import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import Answer from "@icons/questionsPage/answer";
import AnswerGroup from "@icons/questionsPage/answerGroup";
import Date from "@icons/questionsPage/date";
import Download from "@icons/questionsPage/download";
import DropDown from "@icons/questionsPage/drop_down";
import Emoji from "@icons/questionsPage/emoji";
import Input from "@icons/questionsPage/input";
import OptionsAndPict from "@icons/questionsPage/options_and_pict";
import OptionsPict from "@icons/questionsPage/options_pict";
import Page from "@icons/questionsPage/page";
import RatingIcon from "@icons/questionsPage/rating";
import Slider from "@icons/questionsPage/slider";
import { Box, InputAdornment, Paper } from "@mui/material";
import { updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
import CustomTextField from "@ui_kit/CustomTextField";
import { useRef, useState } from "react";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import { useDebouncedCallback } from "use-debounce";
import type { AnyTypedQuizQuestion, UntypedQuizQuestion } from "../../../../model/questionTypes/shared";
import SwitchQuestionsPage from "../../SwitchQuestionsPage";
import { ChooseAnswerModal } from "./ChooseAnswerModal";
import FormTypeQuestions from "../FormTypeQuestions";
import { QuestionType } from "@model/question/question";


interface Props {
    question: AnyTypedQuizQuestion | UntypedQuizQuestion;
    questionIndex: number;
    draggableProps: DraggableProvidedDragHandleProps | null | undefined;
}

export default function QuestionsPageCard({
    question,
    questionIndex,
    draggableProps,
}: Props) {
    const [open, setOpen] = useState<boolean>(false);
    const anchorRef = useRef(null);

    const setTitle = useDebouncedCallback((title) => {
        const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;

        updateQuestionFn(question.id, question => {
            question.title = title;
        });
    }, 200);

    return (
        <>
            <Paper
                sx={{
                    overflow: "hidden",
                    maxWidth: "796px",
                    width: "100%",
                    backgroundColor: "white",
                    border: "none",
                    boxShadow: "none",
                    paddingBottom: "20px",
                    borderRadius: "0",
                    borderTopLeftRadius: "12px",
                    borderTopRightRadius: "12px",
                }}
            >
                <Box
                    sx={{
                        display: "flex",
                        flexDirection: "column",
                        padding: 0,
                    }}
                >
                    <CustomTextField
                        placeholder={`Заголовок ${questionIndex + 1} вопроса`}
                        text={question.title}
                        onChange={({ target }) => setTitle(target.value)}
                        sx={{ margin: "20px", width: "auto" }}
                        InputProps={{
                            startAdornment: (
                                <Box>
                                    <InputAdornment
                                        ref={anchorRef}
                                        position="start"
                                        sx={{ cursor: "pointer" }}
                                        onClick={() => setOpen((isOpened) => !isOpened)}
                                    >
                                        {IconAndrom(question.type)}
                                    </InputAdornment>
                                    <ChooseAnswerModal
                                        open={open}
                                        onClose={() => setOpen(false)}
                                        anchorRef={anchorRef}
                                        question={question}
                                        questionType={question.type}
                                    />
                                </Box>
                            ),
                            endAdornment: (
                                <Box {...draggableProps}>
                                    {questionIndex !== 0 && (
                                        <InputAdornment position="start">
                                            <PointsIcon
                                                style={{ color: "#9A9AAF", fontSize: "30px" }}
                                            />
                                        </InputAdornment>
                                    )}
                                </Box>
                            ),
                        }}
                    />
                    {question.type === null ? (
                        <FormTypeQuestions question={question} />
                    ) : (
                        <SwitchQuestionsPage question={question} />
                    )}
                </Box>
            </Paper>
        </>
    );
}

const IconAndrom = (questionType: QuestionType | null) => {
    switch (questionType) {
        case "variant":
            return <Answer color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
        case "images":
            return (
                <OptionsPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
            );
        case "varimg":
            return (
                <OptionsAndPict
                    color="#9A9AAF"
                    sx={{ height: "22px", width: "20px" }}
                />
            );
        case "emoji":
            return <Emoji color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
        case "text":
            return <Input color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
        case "select":
            return (
                <DropDown color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
            );
        case "date":
            return <Date color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
        case "number":
            return <Slider color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
        case "file":
            return (
                <Download color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
            );
        case "page":
            return <Page color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
        case "rating":
            return (
                <RatingIcon color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
            );
        default:
            return (
                <AnswerGroup color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
            );
    }
};
