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

import { isNil } from 'lodash-es';

import { useLokaliseTranslation } from 'src/utils/i18n';

import SegmentedToggle from '../../components/SegmentedToggle';
import { GoalPriorityTypes } from '../../types';

export const CriticalityButtonGroup = () => {
  const { t } = useLokaliseTranslation('goals');
  const { watch, setValue } = useFormContext();
  const { priority } = watch();

  const chips = [
    { value: GoalPriorityTypes.LOW, label: t('priority.low') },
    { value: GoalPriorityTypes.MEDIUM, label: t('priority.medium') },
    { value: GoalPriorityTypes.HIGH, label: t('priority.high') },
  ];

  const selectedChip = chips.find(chip => chip.value === priority);
  const value = selectedChip?.value;

  return (
    <SegmentedToggle
      options={chips}
      value={value ?? null}
      onChange={v => {
        if (!isNil(v)) {
          setValue('priority', v);
        }
      }}
      ariaLabel={t('new.criticality')}
    />
  );
};

export default CriticalityButtonGroup;