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

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

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

import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";

type VariantProps = {
  stepNumber: number;
  currentQuestion: QuizQuestionVariant;
};

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

  const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;

  return (
    <Box>
      <Typography variant="h5">{currentQuestion.title}</Typography>
      <Box sx={{ display: "flex" }}>
        <Group
          name={currentQuestion.id}
          value={currentQuestion.content.variants.findIndex(
            ({ id }) => answer === id
          )}
          sx={{
            display: "flex",
            flexWrap: "wrap",
            flexDirection: "row",
            justifyContent: "space-between",
            flexBasis: "100%",
            marginTop: "20px",
          }}
        >
          <Box
            sx={{
              display: "flex",
              flexDirection: "row",
              flexWrap: "wrap",
              width: "100%",
              gap: "20px",
            }}
          >
            {currentQuestion.content.variants.map((variant, index) => (
              <FormControlLabel
                key={variant.id}
                sx={{
                  margin: "0",
                  borderRadius: "12px",
                  padding: "15px",
                  border: `1px solid ${theme.palette.grey2.main}`,
                  display: "flex",
                  maxWidth: "685px",
                  justifyContent: "space-between",
                  width: "100%",
                }}
                value={index}
                labelPlacement="start"
                control={
                  currentQuestion.content.multi ? (
                    <Checkbox
                      checked={!!answer?.includes(variant.id)}
                      checkedIcon={<RadioCheck />}
                      icon={<RadioIcon />}
                    />
                  ) : (
                    <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
                  )
                }
                label={variant.answer}
                onClick={(event) => {
                  event.preventDefault();
                  const variantId = currentQuestion.content.variants[index].id;

                  if (currentQuestion.content.multi) {
                    const currentAnswer =
                      typeof answer !== "string" ? answer || [] : [];

                    updateAnswer(
                      currentQuestion.content.id,
                      currentAnswer?.includes(variantId)
                        ? currentAnswer?.filter((item) => item !== variantId)
                        : [...currentAnswer, variantId]
                    );

                    return;
                  }

                  updateAnswer(currentQuestion.content.id, variantId);

                  if (answer === variantId) {
                    deleteAnswer(currentQuestion.content.id);
                  }
                }}
              />
            ))}
          </Box>
        </Group>
        {currentQuestion.content.back && (
          <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
            <img
              src={currentQuestion.content.back}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              alt=""
            />
          </Box>
        )}
      </Box>
    </Box>
  );
};