import { ChangeEvent, useState } from "react";
import {
  Box,
  FormControl,
  FormControlLabel,
  FormLabel,
  Radio,
  RadioGroup,
  Tooltip,
  Typography,
} from "@mui/material";

import InfoIcon from "@icons/InfoIcon";

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

interface Props {
  question: QuizQuestionVariant;
}

export default function Variant({ question }: Props) {
  const [value, setValue] = useState<string | null>(null);

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value);
  };

  return (
    <FormControl fullWidth>
      <FormLabel id="quiz-question-radio-group" data-cy="question-title">
        {question.title}
      </FormLabel>
      <RadioGroup
        aria-labelledby="quiz-question-radio-group"
        value={value}
        onChange={handleChange}
      >
        {question.content.variants
          .filter(({ answer }) => answer)
          .map((variant, index) => (
            <FormControlLabel
              key={index}
              value={variant.answer}
              data-cy="variant-answer"
              control={
                <Radio
                  inputProps={{
                    "data-cy": "variant-radio",
                  }}
                />
              }
              label={
                <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
                  <Typography>
                    {variant.answer}
                  </Typography>
                  {variant.hints && (
                    <Tooltip title={variant.hints} placement="right">
                      <Box>
                        <InfoIcon />
                      </Box>
                    </Tooltip>
                  )}
                </Box>
              }
            />
          ))}
      </RadioGroup>
    </FormControl>
  );
}
