import {
  Box,
  Typography,
  RadioGroup,
  FormControlLabel,
  Radio,
  useTheme,
  FormControl,
  useMediaQuery
} from "@mui/material";
import { modes } from "../../../utils/themes/Publication/themePublication";

import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView/store";

import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";

import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";
import { useQuestionsStore } from "@root/quizData/store"

type EmojiProps = {
  currentQuestion: QuizQuestionEmoji;
};

export const Emoji = ({ currentQuestion }: EmojiProps) => {
  const theme = useTheme();
  const mode = modes;
  
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  const { settings } = useQuestionsStore()
  const { answers } = useQuizViewStore();
  const { answer } =
    answers.find(
      ({ questionId }) => questionId === currentQuestion.id
    ) ?? {};

    return (
      <Box>
        <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
        <RadioGroup
          name={currentQuestion.id}
          value={currentQuestion.content.variants.findIndex(
            ({ id }) => answer === id
          )}
          onChange={({ target }) =>{
            console.log(currentQuestion.content.variants[Number(target.value)])
            updateAnswer(
              currentQuestion.id,
              currentQuestion.content.variants[Number(target.value)].answer
            )
          }
          }
          sx={{
            display: "flex",
            flexWrap: "wrap",
            flexDirection: "row",
            justifyContent: "space-between",
            marginTop: "20px",
          }}
        >
          <Box sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}>
            {currentQuestion.content.variants.map((variant, index) => (
              <FormControl
                key={variant.id}
                sx={{
                  borderRadius: "12px",
                  border: `1px solid`,
                  borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
                  overflow: "hidden",
                  maxWidth: "317px",
                  width: "100%",
                  height: "255px",
                }}
              >
                <Box
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    height: "193px",
                    background: "#ffffff",
                  }}
                >
                  <Box
                    sx={{
                      width: "100%",
                      display: "flex",
                      justifyContent: "center",
                    }}
                  >
                    {variant.extendedText && (
                      <Typography fontSize={"100px"}>
                        {variant.extendedText}
                      </Typography>
                    )}
                  </Box>
                </Box>
                <FormControlLabel
                  key={variant.id}
                  sx={{
                    margin: 0,
                    padding: "15px",
                    color: theme.palette.text.primary,
                    display: "flex",
                    gap: "10px",
                  }}
                  value={index}
                  onClick={async (event) => {
                    event.preventDefault();
  
                    try {
  
                      await sendAnswer({
                        questionId: currentQuestion.id,
                        body: currentQuestion.content.variants[index].answer,
                        //@ts-ignore
                        qid: settings.qid
                      })
  
                      updateAnswer(
                        currentQuestion.id,
                        currentQuestion.content.variants[index].id
                      );
  
                    } catch (e) {
                      enqueueSnackbar("ответ не был засчитан")
                    }
  
  
  
                    if (answer === currentQuestion.content.variants[index].id) {
                      deleteAnswer(currentQuestion.id);
                      try {
    
                        await sendAnswer({
                          questionId: currentQuestion.id,
                          body: "",
                          //@ts-ignore
                          qid: settings.qid
                        })
    
                      } catch (e) {
                        enqueueSnackbar("ответ не был засчитан")
                      }
                    }
                  }}
  
                  control={
                    //@ts-ignore
                    <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main}/>} icon={<RadioIcon />} />
                  }
                  label={
                    <Box sx={{ display: "flex", gap: "10px" }}>
                      <Typography sx={{wordBreak: "break-word"}}>{variant.answer}</Typography>
                    </Box>
                  }
                />
              </FormControl>
            ))}
          </Box>
        </RadioGroup>
      </Box>
    );
  
};