import { FieldError, FieldErrors, get, useFormState } from 'react-hook-form';

import { useI18n } from '~/src/lib/i18n';
import { Text } from '~/src/ui/primitives/text';

interface FormFieldErrorProps {
  name: string;
}

const getNestedError = (
  errors: FieldErrors,
  name: string
): FieldError | undefined => {
  return get(errors, name) as FieldError | undefined;
};

export const FormFieldError = ({ name }: FormFieldErrorProps) => {
  const { errors } = useFormState({ name });
  const { t } = useI18n('form');

  const fieldError = getNestedError(errors, name);
  if (!fieldError) return null;

  if (fieldError.type === 'required') {
    return (
      <Text variant="body-small" color="secondary">
        {t('validation.fieldRequired')}
      </Text>
    );
  }

  if (fieldError.type === 'maxLength') {
    const max = get(fieldError.ref, 'maxLength');
    return (
      <Text variant="body-small" color="secondary">
        {t('validation.maxLength', { max })}
      </Text>
    );
  }

  return (
    <Text variant="body-small" color="secondary">
      {fieldError.message?.toString() || t('validation.invalidValue')}
    </Text>
  );
};