import { EmojiIcons } from "@icons/EmojiIocns";
import AddEmoji from "@icons/questionsPage/addEmoji";
import PlusImage from "@icons/questionsPage/plus";
import {
    Box,
    Link,
    Popover,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { addQuestionVariant, updateQuestion } from "@root/questions/actions";
import { EmojiPicker } from "@ui_kit/EmojiPicker";
import { useState } from "react";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptions from "../ButtonsOptions";
import SwitchEmoji from "./switchEmoji";


interface Props {
    question: QuizQuestionEmoji;
}

export default function Emoji({ question }: Props) {
    const [switchState, setSwitchState] = useState<string>("setting");
    const [open, setOpen] = useState<boolean>(false);
    const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(
        null
    );
    const [selectedVariant, setSelectedVariant] = useState<string | null>(null);
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));

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

    return (
        <>
            <Box sx={{ padding: "20px" }}>
                <AnswerDraggableList
                    question={question}
                    additionalContent={(variant) => (
                        <>
                            {!isTablet && (
                                <Box sx={{ cursor: "pointer" }}>
                                    <Box
                                        data-cy="choose-emoji-button"
                                        onClick={({ currentTarget }) => {
                                            setAnchorElement(currentTarget);
                                            setSelectedVariant(variant.id);
                                            setOpen(true);
                                        }}
                                    >
                                        <Box
                                            sx={{
                                                display: "flex",
                                                justifyContent: "center",
                                                alignItems: "center",
                                                gap: "5px",
                                            }}
                                        >
                                            {variant.extendedText ? (
                                                <Box
                                                    sx={{
                                                        height: "40px",
                                                        width: "60px",
                                                        display: "flex",
                                                        alignItems: "center",
                                                        justifyContent: "space-between",
                                                        background: "#EEE4FC",
                                                        borderRadius: "3px",
                                                    }}
                                                >
                                                    <Box
                                                        sx={{
                                                            width: "100%",
                                                            display: "flex",
                                                            justifyContent: "center",
                                                        }}
                                                    >
                                                        {variant.extendedText}
                                                    </Box>
                                                    <Box>
                                                        <PlusImage />
                                                    </Box>
                                                </Box>
                                            ) : (
                                                <AddEmoji />
                                            )}
                                        </Box>
                                    </Box>
                                </Box>
                            )}
                        </>
                    )}
                    additionalMobile={(variant) => (
                        <>
                            {isTablet && (
                                <Box
                                    onClick={({ currentTarget }) => {
                                        setAnchorElement(currentTarget);
                                        setSelectedVariant(variant.id);
                                        setOpen(true);
                                    }}
                                    sx={{
                                        display: "flex",
                                        alignItems: "center",
                                        m: "8px",
                                        position: "relative",
                                    }}
                                >
                                    <Box
                                        sx={{
                                            width: "100%",
                                            background: "#EEE4FC",
                                            height: "40px",
                                        }}
                                    />
                                    {variant.extendedText ? (
                                        <Box
                                            sx={{
                                                position: "absolute",
                                                color: "#7E2AEA",
                                                fontSize: "20px",
                                                left: "45%",
                                                right: "55%",
                                            }}
                                        >
                                            {variant.extendedText}
                                        </Box>
                                    ) : (
                                        <EmojiIcons
                                            style={{
                                                position: "absolute",
                                                color: "#7E2AEA",
                                                fontSize: "20px",
                                                left: "45%",
                                                right: "55%",
                                            }}
                                        />
                                    )}
                                    <Box
                                        sx={{
                                            display: "flex",
                                            justifyContent: "center",
                                            alignItems: "center",
                                            width: "20px",
                                            background: "#EEE4FC",
                                            height: "40px",
                                            color: "white",
                                            backgroundColor: "#7E2AEA",
                                        }}
                                    >
                                        +
                                    </Box>
                                </Box>
                            )}
                        </>
                    )}
                />
                <Popover
                    open={open}
                    anchorEl={anchorElement}
                    onClick={(event) => event.stopPropagation()}
                    onClose={() => setOpen(false)}
                    anchorOrigin={{
                        vertical: "bottom",
                        horizontal: "right",
                    }}
                    sx={{
                        ".MuiPaper-root.MuiPaper-rounded": {
                            borderRadius: "10px",
                        },
                    }}
                >
                    <EmojiPicker
                        onEmojiSelect={({ native }) => {
                            setOpen(false);
                            updateQuestion(question.id, question => {
                                if (question.type !== "emoji") return;

                                const variant = question.content.variants.find(v => v.id === selectedVariant);
                                if (!variant) return;

                                variant.extendedText = native;
                            });
                        }}
                    />
                </Popover>
                <Box
                    sx={{
                        display: "flex",
                        alignItems: "center",
                        gap: "10px",
                        marginBottom: isMobile ? "17px" : "20px",
                    }}
                >
                    <Link
                        component="button"
                        variant="body2"
                        sx={{ color: theme.palette.brightPurple.main }}
                        onClick={() => addQuestionVariant(question.id)}
                    >
                        Добавьте ответ
                    </Link>
                    {!isTablet && (
                        <>
                            <Typography
                                sx={{
                                    fontWeight: 400,
                                    lineHeight: "21.33px",
                                    color: theme.palette.grey2.main,
                                    fontSize: "16px",
                                }}
                            >
                                или нажмите Enter
                            </Typography>
                            <EnterIcon
                                style={{
                                    color: "#7E2AEA",
                                    fontSize: "24px",
                                    marginLeft: "6px",
                                }}
                            />
                        </>
                    )}
                </Box>
            </Box>
            <ButtonsOptions
                switchState={switchState}
                SSHC={SSHC}
                question={question}
            />
            <SwitchEmoji switchState={switchState} question={question} />
        </>
    );
}