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

import HuFormSelectionCard from '@material-hu/components/composed-components/SelectionCard/form';
import HuRadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';

import useRules from 'src/hooks/useRules';

import { type EvaluationForm } from '..';

const UniqueChoiceInput = ({
  choices,
  questionIndex,
}: {
  choices: string[];
  questionIndex: number;
}) => {
  const name = `formValues.${questionIndex}` as const;
  const { control, getValues } = useFormContext<EvaluationForm>();

  const values = useWatch({
    control,
    name,
  });

  const valuesForValidation = getValues(name) as boolean[] | undefined;

  const rules = useRules({
    validateAtLeastOneChecked: valuesForValidation ?? [],
  });

  return (
    <>
      {choices.map((choice, choiceIndex) => (
        <HuFormSelectionCard
          key={choice}
          name={`${name}.${choiceIndex}`}
          isOnlyOption
          rules={rules}
          sx={{
            width: '100%',
            '& button': {
              minHeight: '75px',
            },
          }}
        >
          <HuRadioButton
            label={choice}
            isActive={Boolean(values?.[choiceIndex])}
          />
        </HuFormSelectionCard>
      ))}
    </>
  );
};

export default UniqueChoiceInput;
