import {
  Box,
  Typography,
  RadioGroup,
  FormControlLabel,
  Radio,
  useTheme,
  FormControl,
} from "@mui/material";

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";

type EmojiProps = {
  currentQuestion: QuizQuestionEmoji;
};

export const Emoji = ({ currentQuestion }: EmojiProps) => {
  const { answers } = useQuizViewStore();
  const theme = useTheme();
  const { answer } =
    answers.find(
      ({ questionId }) => questionId === currentQuestion.id
    ) ?? {};

  return (
    <Box>
      <Typography variant="h5">{currentQuestion.title}</Typography>
      <RadioGroup
        name={currentQuestion.id.toString()}
        value={currentQuestion.content.variants.findIndex(
          ({ id }) => answer === id
        )}
        onChange={({ target }) =>
          updateAnswer(
            currentQuestion.id,
            currentQuestion.content.variants[Number(target.value)].id
          )
        }
        sx={{
          display: "flex",
          flexWrap: "wrap",
          flexDirection: "row",
          justifyContent: "space-between",
          marginTop: "20px",
        }}
      >
        <Box sx={{ display: "flex", width: "100%", gap: "42px" }}>
          {currentQuestion.content.variants.map((variant, index) => (
            <FormControl
              key={variant.id}
              sx={{
                borderRadius: "12px",
                border: `1px solid ${theme.palette.grey2.main}`,
                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: "#4D4D4D",
                  display: "flex",
                  gap: "10px",
                }}
                value={index}
                onClick={(event) => {
                  event.preventDefault();

                  updateAnswer(
                    currentQuestion.id,
                    currentQuestion.content.variants[index].id
                  );

                  if (answer === currentQuestion.content.variants[index].id) {
                    deleteAnswer(currentQuestion.id);
                  }
                }}
                control={
                  <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
                }
                label={
                  <Box sx={{ display: "flex", gap: "10px" }}>
                    <Typography>{variant.answer}</Typography>
                  </Box>
                }
              />
            </FormControl>
          ))}
        </Box>
      </RadioGroup>
    </Box>
  );
};