import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from './cva'
import { useFieldControl } from './Field'

const inputVariants = cva(
  'w-full rounded-md border border-border bg-surface text-fg focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-[var(--mod-opacity-disabled)] read-only:bg-[var(--mod-color-neutral-2)]',
  {
    variants: {
      size: {
        sm: 'text-sm px-2 py-1',
        md: 'text-base px-3 py-2',
        lg: 'text-lg px-4 py-3',
      },
      invalid: {
        true: 'border-[var(--mod-color-danger-9)] aria-invalid:border-[var(--mod-color-danger-9)] aria-invalid:focus-visible:outline-[var(--mod-color-danger-9)]',
        false: '',
      },
    },
    defaultVariants: { size: 'md', invalid: false },
  },
)

export interface InputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
    VariantProps<typeof inputVariants> {}

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, size, invalid, type = 'text', id, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
    const field = useFieldControl()
    const resolvedInvalid = invalid ?? field?.invalid ?? false

    return (
      <input
        ref={ref}
        type={type}
        id={id ?? field?.id}
        aria-invalid={ariaInvalid ?? (resolvedInvalid ? true : undefined)}
        aria-describedby={ariaDescribedBy ?? field?.describedBy}
        aria-required={props.required ?? field?.required}
        className={cn(inputVariants({ size, invalid: resolvedInvalid }), className)}
        {...props}
      />
    )
  },
)
Input.displayName = 'Input'