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

const textareaVariants = cva(
  'w-full border border-border bg-surface text-fg rounded-md focus-visible:outline focus-visible:outline-accent disabled:opacity-50 disabled:cursor-not-allowed px-3 py-2 text-base',
  {
    variants: {
      invalid: {
        true: 'border-danger',
        false: '',
      },
    },
    defaultVariants: { invalid: false },
  },
)

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  invalid?: boolean
}

export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, invalid, id, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
    const field = useFieldControl()
    const resolvedInvalid = invalid ?? field?.invalid ?? false

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