import { type ForwardedRef, forwardRef } from 'react';
import type { ValidationResult } from 'react-aria-components';
import {
  TextField as AriaTextField,
  type TextFieldProps as AriaTextFieldProps,
  type InputProps,
} from 'react-aria-components/TextField';
import { twJoin } from 'tailwind-merge';
import { tv } from 'tailwind-variants';
import {
  Description,
  FieldError,
  Input,
  Label,
  fieldBorderStyles,
} from './Field';
import { composeTailwindRenderProps, focusRing } from './utils';

const inputStyles = tv({
  extend: focusRing,
  base: 'rounded-md border',
  variants: {
    isFocused: fieldBorderStyles.variants.isFocusWithin,
    ...fieldBorderStyles.variants,
  },
});

export interface TextFieldProps extends AriaTextFieldProps {
  label?: string;
  description?: string;
  errorMessage?: string | ((validation: ValidationResult) => string);
  inputProps?: InputProps;
}

export const TextField = forwardRef(function TextField(
  { label, description, errorMessage, inputProps, ...props }: TextFieldProps,
  ref: ForwardedRef<HTMLInputElement>,
) {
  return (
    <AriaTextField
      {...props}
      className={composeTailwindRenderProps(
        props.className,
        'flex flex-col gap-1',
      )}
    >
      {label && (
        <Label
          className={twJoin(
            props.isRequired &&
              "after:text-warning-500 after:dark:text-warning-300 after:ml-0.5 after:content-['*']",
          )}
        >
          {label}
        </Label>
      )}
      <Input ref={ref} {...inputProps} className={inputStyles} />
      {description && <Description>{description}</Description>}
      <FieldError>{errorMessage}</FieldError>
    </AriaTextField>
  );
});