import { Box, Link, Popover, Typography, useMediaQuery, useTheme } from "@mui/material";
import { 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 "@frontend/squzanswerer";
import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptions from "../QuestionOptions/ButtonsLayout/ButtonsOptions";
import EmojiAnswerItem from "./EmojiAnswerItem/EmojiAnswerItem";
import SwitchEmoji from "./switchEmoji";
import  Emoji3  from '@emoji-mart/react';

interface Props {
  question: QuizQuestionEmoji;
  openBranchingPage: boolean;
  setOpenBranchingPage: (a: boolean) => void;
}

export default function Emoji({ question, openBranchingPage, setOpenBranchingPage }: Props) {
  const [switchState, setSwitchState] = useState<string>("setting");
  const {onClickAddAnAnswer} = useAddAnswer();
  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));

  return (
    <>
      <Box sx={{ padding: "20px" }}>

        <AnswerDraggableList
          questionId={question.id}
          variants={question.content.variants
            .filter(variant => !variant.isOwn ? true : question.content.own && variant.isOwn)
            .map((variant, index) => (
            <EmojiAnswerItem
              key={variant.id}
              index={index}
              disableKeyDown={question.content.variants.length >= 100}
              questionId={question.id}
              variant={variant}
              isTablet={isTablet}
              setAnchorElement={setAnchorElement}
              setOpen={setOpen}
              setSelectedVariant={setSelectedVariant}
              isOwn={Boolean(variant?.isOwn)}
              ownPlaceholder={question.content.ownPlaceholder}
            />
          ))}
        />

        <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={() => onClickAddAnAnswer(question)}
          >
            Добавьте ответ
          </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}
        setSwitchState={setSwitchState}
        questionId={question.id}
        questionContentId={question.content.id}
        questionType={question.type}
        questionHasParent={question.content.rule.parentId?.length !== 0}
        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchEmoji
        switchState={switchState}
        question={question}
      />
      <Box sx={{
        display: "none"
      }}>
        <Emoji3 emoji={{ id: 'construction_worker', skin: 1 }} size={24} />
      </Box>
    </>
  );
}
