import * as stylex from '@stylexjs/stylex';
import { useFormContext } from 'react-hook-form';

import { useI18n } from '~/src/lib/i18n';
import { FormField } from './FormField';
import { formControl, formControlSize } from './styles';
import { FormCustomField } from './types';

export const FormInputControl = (props: FormCustomField) => {
  const { register, getFieldState, formState } = useFormContext();

  const { name, placeholder, type = 'text', max, min, required } = props;

  const state = getFieldState(name, formState);
  const { t, td } = useI18n('form');

  return (
    <input
      id={name}
      type={type}
      placeholder={placeholder}
      {...stylex.props(
        formControl.base,
        formControlSize[props.size ?? 'medium'],
        state.invalid && formControl.invalid
      )}
      {...register(name, {
        max,
        min,
        required,
        pattern: props.pattern
          ? {
              value: new RegExp(props.pattern),
              message:
                td(`presets.${name}.validation.message`) ||
                t('validation.invalidValue'),
            }
          : undefined,
      })}
    />
  );
};

export const FormInput = (props: FormCustomField) => {
  return (
    <FormField {...props}>
      <FormInputControl {...props} />
    </FormField>
  );
};