Textarea

'use client';

import { useRef, useState } from 'react';
import { cn, useLocale, useTexts } from '@/lib/kit';
import { controlBox, useControl, useShake, withField, type FieldOwnProps } from '@/components/ui/input';

const TEXTS = {
  en: { left: 'characters left', over: 'characters too many' },
  de: { left: 'Zeichen übrig', over: 'Zeichen zu viel' },
};

export interface TextareaProps extends FieldOwnProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength'> {
  /** Grows with its content between minRows and maxRows (CSS field-sizing, falls back to rows) */
  autoResize?: boolean;
  minRows?: number;
  maxRows?: number;
  /** Shows a counter. Going over is allowed while typing and shown as an error, so nothing gets cut off silently. */
  maxLength?: number;
  /** Something in the footer row, e.g. formatting hints or an attach button */
  footer?: React.ReactNode;
  invalid?: boolean;
  ref?: React.Ref<HTMLTextAreaElement>;
  labels?: Partial<(typeof TEXTS)['en']>;
  className?: string;
}

function TextareaBox({ autoResize = true, minRows = 3, maxRows = 10, maxLength, footer, invalid, labels, className, value, defaultValue, onChange, ref, ...rest }: Omit<TextareaProps, keyof FieldOwnProps>) {
  const t = useTexts(TEXTS, labels);
  const locale = useLocale();
  const c = useControl({ ...rest, invalid });
  const [inner, setInner] = useState(String(defaultValue ?? ''));
  const text = value !== undefined ? String(value) : inner;
  const over = maxLength !== undefined && text.length > maxLength;
  const left = maxLength !== undefined ? maxLength - text.length : 0;
  const fmt = (n: number) => n.toLocaleString(locale === 'de' ? 'de-DE' : 'en-US');
  const showFooter = maxLength !== undefined || footer;
  const boxRef = useRef<HTMLDivElement>(null);
  // One shake when the text goes over the limit or the field turns invalid
  useShake(boxRef, c.invalid || over);
  return (
    <div ref={boxRef} data-invalid={c.invalid || over || undefined} data-disabled={c.disabled || undefined} className={cn('flex w-full flex-col overflow-hidden rounded-lg', controlBox, className)}>
      <textarea
        {...rest}
        ref={ref}
        id={c.id}
        value={value}
        defaultValue={value === undefined ? defaultValue : undefined}
        onChange={(e) => {
          setInner(e.target.value);
          onChange?.(e);
        }}
        disabled={c.disabled}
        required={c.required}
        aria-invalid={c.invalid || over || undefined}
        aria-describedby={c['aria-describedby']}
        rows={minRows}
        style={{ minHeight: `calc(${minRows} * 1.5em + 1.25rem)`, maxHeight: `calc(${maxRows} * 1.5em + 1.25rem)` }}
        className={cn(
          'w-full resize-none bg-transparent px-3.5 py-2.5 text-base leading-[1.5] text-inherit outline-none placeholder:text-subtle-foreground disabled:cursor-not-allowed sm:text-sm sm:leading-[1.5]',
          autoResize ? '[field-sizing:content]' : 'resize-y',
          'kit-scrollbar',
        )}
      />
      {showFooter && (
        <div className="flex min-h-10 items-center justify-between gap-3 px-2 pb-2 ps-3.5">
          <div className="flex min-w-0 flex-1 items-center gap-1">{footer}</div>
          {maxLength !== undefined && (
            <p className={cn('ms-auto shrink-0 text-xs tabular-nums transition-colors duration-300', over ? 'font-medium text-destructive' : left <= maxLength * 0.1 ? 'text-foreground' : 'text-subtle-foreground')}>
              <span aria-hidden>{over ? `−${fmt(-left)}` : `${fmt(text.length)} / ${fmt(maxLength)}`}</span>
              <span className="sr-only">{over ? `${fmt(-left)} ${t.over}` : `${fmt(left)} ${t.left}`}</span>
            </p>
          )}
        </div>
      )}
    </div>
  );
}

/**
 * Multi-line text that grows with its content, with an optional counter and footer.
 *   <Textarea label="Message" maxLength={500} hint="We reply within a day." />
 */
export function Textarea({ label, hint, error, optional, labelAction, className, ...rest }: TextareaProps) {
  const wrapped = Boolean(label || hint || error);
  return withField({ label, hint, error, optional, labelAction, id: rest.id, required: rest.required, disabled: rest.disabled, className }, <TextareaBox {...rest} className={wrapped ? undefined : className} />);
}