Textarea

'use client';

import { useState, useId, forwardRef } from 'react';
import {
  type InputVariant,
  type InputState,
  type InputSize,
  variantStyles,
  sizeStyles,
  stateColors,
} from './input-shared';

export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
  variant?: InputVariant;
  state?: InputState;
  inputSize?: InputSize;
  label?: string;
  helperText?: string;
  errorText?: string;
  successText?: string;
  warningText?: string;
  showCharCount?: boolean;
  maxLength?: number;
  fullWidth?: boolean;
  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
  containerClassName?: string;
}

const resizeStyles: Record<string, string> = {
  none: 'resize-none',
  vertical: 'resize-y',
  horizontal: 'resize-x',
  both: 'resize',
};

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
  {
    variant = 'default',
    state = 'default',
    inputSize = 'md',
    label,
    helperText,
    errorText,
    successText,
    warningText,
    showCharCount = false,
    maxLength,
    fullWidth = true,
    resize = 'vertical',
    containerClassName = '',
    className = '',
    disabled,
    value,
    defaultValue,
    onChange,
    id,
    rows = 4,
    ...rest
  },
  ref
) {
  const [internalValue, setInternalValue] = useState(defaultValue?.toString() || '');
  const currentValue = value !== undefined ? value.toString() : internalValue;
  const charCount = currentValue.length;

  const autoId = useId();
  const inputId = id || `textarea-${autoId}`;
  const feedbackId = `${inputId}-feedback`;

  const activeState = disabled ? 'default' : state;
  const feedbackText = errorText || successText || warningText || helperText;
  const feedbackState = errorText ? 'error' : successText ? 'success' : warningText ? 'warning' : 'default';
  const isInvalid = feedbackState === 'error' || activeState === 'error';

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    if (value === undefined) {
      setInternalValue(e.target.value);
    }
    onChange?.(e);
  };

  return (
    <div className={`${fullWidth ? 'w-full' : 'inline-flex flex-col'} ${containerClassName}`}>
      {label && (
        <label
          htmlFor={inputId}
          className={`block font-medium text-(--text) mb-1.5 ${sizeStyles[inputSize].label}`}
        >
          {label}
        </label>
      )}
      <textarea
        ref={ref}
        id={inputId}
        value={value}
        defaultValue={value === undefined ? defaultValue : undefined}
        onChange={handleChange}
        maxLength={maxLength}
        disabled={disabled}
        rows={rows}
        aria-invalid={isInvalid || undefined}
        aria-describedby={feedbackText ? feedbackId : undefined}
        className={[
          'w-full rounded-lg outline-none transition-colors py-2 text-(--text)',
          variantStyles[variant][activeState],
          sizeStyles[inputSize].input,
          resizeStyles[resize],
          disabled ? 'opacity-50 cursor-not-allowed' : '',
          className,
        ].filter(Boolean).join(' ')}
        {...rest}
      />
      <div className="flex items-center justify-between mt-1.5 gap-2">
        {feedbackText && (
          <p
            id={feedbackId}
            role={feedbackState === 'error' ? 'alert' : undefined}
            className={`${sizeStyles[inputSize].helper} ${stateColors[feedbackState]}`}
          >
            {feedbackText}
          </p>
        )}
        {showCharCount && maxLength && (
          <p className={`${sizeStyles[inputSize].helper} text-(--text-muted) ml-auto tabular-nums`}>
            {charCount}/{maxLength}
          </p>
        )}
      </div>
    </div>
  );
});