import { Controller, useFormContext } from 'react-hook-form';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import HuRadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';

const parseScoreAnswer = (answer: unknown) =>
  typeof answer === 'string' && Number(answer) >= 0 ? Number(answer) : answer;

type ScoreInputProps = {
  name: string;
  label: string;
  answer?: number;
  formFilled: boolean;
  options: string[];
  isRequired: boolean;
};

const ScoreInput = (props: ScoreInputProps) => {
  const { control } = useFormContext();
  const { isRequired, label, options = [], name, answer, formFilled } = props;
  const theme = useTheme();

  return (
    <Stack sx={{ gap: 2, width: '100%' }}>
      {!formFilled && <Typography variant="body1">{label}</Typography>}
      <Controller
        control={control}
        name={name}
        defaultValue={answer}
        rules={{ required: isRequired && !formFilled }}
        render={({ field: { onChange, value } }) => {
          // Optional questions must be submittable with no answer, so clicking the
          // already-selected option clears the field back to "no answer".
          const toggleScore = (index: number) =>
            onChange(index === parseScoreAnswer(value) ? undefined : index);

          return (
            <Stack sx={{ gap: 2, width: '100%' }}>
              {options.map((option, index) => {
                const answerValue = formFilled
                  ? parseScoreAnswer(answer)
                  : parseScoreAnswer(value);
                const selected = index === answerValue;
                return (
                  <CardContainer
                    key={`${name}-${String(index)}`}
                    fullWidth
                    noHover={formFilled}
                    onClick={formFilled ? undefined : () => toggleScore(index)}
                    sx={{
                      cursor: formFilled ? 'default' : 'pointer',
                      borderColor: selected
                        ? theme.palette.base?.blueBrand[400]
                        : theme.palette.new.border.neutral.default,
                      backgroundColor: selected
                        ? theme.palette.new.background.layout.brand
                        : theme.palette.new.background.elements.default,
                    }}
                  >
                    <Stack
                      sx={{
                        pointerEvents: formFilled ? 'auto' : 'none',
                        width: '100%',
                      }}
                    >
                      <HuRadioButton
                        label={option}
                        isActive={selected}
                        disabled={formFilled}
                      />
                    </Stack>
                  </CardContainer>
                );
              })}
            </Stack>
          );
        }}
      />
    </Stack>
  );
};

export default ScoreInput;
