import { cva, type VariantProps } from 'class-variance-authority'
import type * as React from 'react'
import { cn } from '../../utils/cn'
import { getInputWidhtStyles } from '../Input'
import { getInputControlTextClassName } from '../inputControlStyles'

export const textareaVariants = cva(
  cn(
    'flex rounded border border-solid border-input-border bg-input px-3 text-input-foreground transition-colors placeholder:text-input-muted-foreground',
    'hover:border-input-border-hover [&.hover]:border-input-border-hover',
    'focus-visible:border-input-border-active focus-visible:shadow-none focus-visible:outline-none [&.focus]:border-input-border-active [&.focus]:shadow-none [&.focus]:outline-none',
    'disabled:cursor-not-allowed disabled:border-input-border-disabled disabled:bg-input-disabled disabled:text-input-muted-more-foreground disabled:placeholder:text-input-muted-more-foreground',
  ),
  {
    variants: {
      size: {
        default: cn(
          getInputControlTextClassName('default'),
          'h-[156px] py-3.5',
        ),
        sm: cn(getInputControlTextClassName('sm'), 'h-[120px] py-2.5'),
        xs: cn(getInputControlTextClassName('xs'), 'h-[96px] py-1.5'),
      },
      width: {
        responsive: getInputWidhtStyles('responsive'),
        hug: getInputWidhtStyles('hug'),
        full: getInputWidhtStyles('full'),
      },
      error: {
        true: 'border-input-border-error',
        false: '',
      },
    },
    defaultVariants: {
      size: 'default',
      width: 'responsive',
      error: false,
    },
  },
)

export interface TextareaProps
  extends Omit<
      React.TextareaHTMLAttributes<HTMLTextAreaElement>,
      'size' | 'width'
    >,
    VariantProps<typeof textareaVariants> {
  ref?: React.Ref<HTMLTextAreaElement>
}

const Textarea = ({
  className,
  size,
  width,
  error,
  ref,
  ...props
}: TextareaProps) => {
  return (
    <textarea
      data-slot="textarea"
      className={cn(textareaVariants({ size, width, error }), className)}
      ref={ref}
      {...props}
    />
  )
}
Textarea.displayName = 'Textarea'

export { Textarea }