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

import type { FormCustomField } from './types';

import { spacing } from '~/src/ui/tokens/tokens.stylex';
import { FormField } from './FormField';
import { formControl, formControlSize } from './styles';

const styles = stylex.create({
  textarea: {
    paddingTop: spacing[4],
    paddingBottom: spacing[4],
    paddingLeft: spacing[5],
    paddingRight: spacing[5],
    height: 'auto',
    resize: 'vertical',
  },
});

export const FormTextarea = (props: FormCustomField) => {
  const { getFieldState, register, formState } = useFormContext();
  const { name, placeholder, rows = 4, max, required } = props;
  const state = getFieldState(name, formState);

  return (
    <FormField {...props}>
      <textarea
        id={name}
        placeholder={placeholder}
        rows={rows}
        {...stylex.props(
          formControl.base,
          formControlSize[props.size ?? 'medium'],
          styles.textarea,
          state.invalid && formControl.invalid
        )}
        {...register(name, { maxLength: max, required })}
      />
    </FormField>
  );
};