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

import { type PolicyForm } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { policyFormFields } from '../constants';

import YearsOfServiceTable from './YearsOfServiceTable';

const YearsOfServiceForm = () => {
  const { t } = useLokaliseTranslation(['time_off']);

  const form = useFormContext<PolicyForm>();

  const [allowanceAmount, unit, yearsOfService] = useWatch({
    control: form.control,
    name: [
      policyFormFields.allowanceIncrease.allowanceAmount,
      policyFormFields.details.unit,
      policyFormFields.allowanceIncrease.yearsOfService,
    ],
  });
  return (
    <Controller
      name={policyFormFields.allowanceIncrease.yearsOfService}
      rules={{
        validate: value => {
          if (!value || value.length === 0) {
            return t('validations:not_empty');
          }
          return true;
        },
      }}
      render={({ field, fieldState }) => (
        <YearsOfServiceTable
          yearsOfService={yearsOfService || []}
          setYearsOfService={field.onChange}
          error={fieldState.error?.message}
          allowanceAmount={allowanceAmount}
          unit={unit}
        />
      )}
    />
  );
};

export default YearsOfServiceForm;