import { MessageIcon } from "@icons/messagIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import TextareaAutosize from "@mui/base/TextareaAutosize";
import {
    Box,
    FormControl,
    IconButton,
    InputAdornment,
    Popover,
    TextField,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { addQuestionVariant, deleteQuestionVariant, setQuestionVariantField } from "@root/questions/actions";
import type { KeyboardEvent, ReactNode } from "react";
import { useState } from "react";
import { Draggable } from "react-beautiful-dnd";
import { useDebouncedCallback } from "use-debounce";
import type { ImageQuestionVariant, QuestionVariant } from "../../../model/questionTypes/shared";


type AnswerItemProps = {
    index: number;
    questionId: string;
    variant: QuestionVariant | ImageQuestionVariant;
    largeCheck: boolean;
    additionalContent?: ReactNode;
    additionalMobile?: ReactNode;
};

export const AnswerItem = ({
    index,
    variant,
    questionId,
    largeCheck,
    additionalContent,
    additionalMobile,
}: AnswerItemProps) => {
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.down(790));
    const [isOpen, setIsOpen] = useState(false);
    const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null); 

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        setAnchorEl(event.currentTarget);
        setIsOpen(true);
    };

    const handleClose = () => {
        setIsOpen(false);
    };

    return (
        <Draggable draggableId={String(index)} index={index}>
            {(provided) => (
                <Box ref={provided.innerRef} {...provided.draggableProps}>
                    <FormControl
                        key={index}
                        fullWidth
                        variant="standard"
                        sx={{
                            margin: isTablet ? " 15px 0 20px 0" : "0 0 20px 0",
                            borderRadius: "10px",
                            border: "1px solid rgba(0, 0, 0, 0.23)",
                            background: "white",
                        }}
                    >
                        <TextField
                            defaultValue={variant.answer}
                            fullWidth
                            focused={false}
                            placeholder={"Добавьте ответ"}
                            multiline={largeCheck}
                            onChange={({ target }) => {
                                setQuestionVariantField(questionId, variant.id, "answer", target.value)
                            }}
                            onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
                                if (event.code === "Enter" && !largeCheck) {
                                    addQuestionVariant(questionId);
                                }
                            }}
                            InputProps={{
                                startAdornment: (
                                    <>
                                        <InputAdornment
                                            {...provided.dragHandleProps}
                                            position="start"
                                        >
                                            <PointsIcon
                                                style={{ color: "#9A9AAF", fontSize: "30px" }}
                                            />
                                        </InputAdornment>
                                        {additionalContent}
                                    </>
                                ),
                                endAdornment: (
                                    <InputAdornment position="end">
                                        <IconButton
                                            sx={{ padding: "0" }}
                                            aria-describedby="my-popover-id"
                                            onClick={handleClick}
                                        >
                                            <MessageIcon
                                                style={{
                                                    color: "#9A9AAF",
                                                    fontSize: "30px",
                                                    marginRight: "6.5px",
                                                }}
                                            />
                                        </IconButton>
                                        <Popover
                                            id="my-popover-id"
                                            open={isOpen}
                                            anchorEl={anchorEl}
                                            onClose={handleClose}
                                            anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
                                        >
                                            <TextareaAutosize
                                                style={{ margin: "10px" }}
                                                placeholder="Подсказка для этого ответа"
                                                value={variant.hints}
                                                onChange={e => setQuestionVariantField(questionId, variant.id, "hints", e.target.value)}
                                                onKeyDown={(
                                                    event: KeyboardEvent<HTMLTextAreaElement>
                                                ) => event.stopPropagation()}
                                            />
                                        </Popover>
                                        <IconButton
                                            sx={{ padding: "0" }}
                                            onClick={() => deleteQuestionVariant(questionId, variant.id)}
                                        >
                                            <DeleteIcon
                                                style={{
                                                    color: theme.palette.grey2.main,
                                                    marginRight: "-1px",
                                                }}
                                            />
                                        </IconButton>
                                    </InputAdornment>
                                ),
                            }}
                            sx={{
                                "& .MuiInputBase-root": {
                                    padding: additionalContent ? "5px 13px" : "13px",
                                    borderRadius: "10px",
                                    background: "#ffffff",
                                    "& input.MuiInputBase-input": {
                                        height: "22px",
                                    },
                                    "& textarea.MuiInputBase-input": {
                                        marginTop: "1px",
                                    },
                                    "& .MuiOutlinedInput-notchedOutline": {
                                        border: "none",
                                    },
                                },
                            }}
                            inputProps={{
                                sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" },
                                "data-cy": "quiz-variant-question-answer",
                            }}
                        />
                        {additionalMobile}
                    </FormControl>
                </Box>
            )}
        </Draggable>

    );
};