"use client";

import { useCallback, useEffect, useRef, type TextareaHTMLAttributes } from "react";

type AdminAutoTextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "rows"> & {
  variant?: "compact" | "description";
};

const MIN_HEIGHT = { compact: 44, description: 220 } as const;
const MAX_HEIGHT = { compact: 200, description: 520 } as const;

export function AdminAutoTextarea({
  className = "",
  defaultValue,
  onInput,
  variant = "compact",
  value,
  ...props
}: AdminAutoTextareaProps) {
  const ref = useRef<HTMLTextAreaElement>(null);

  const resize = useCallback(() => {
    const element = ref.current;
    if (!element) {
      return;
    }

    element.style.height = "auto";
    const nextHeight = Math.min(Math.max(element.scrollHeight, MIN_HEIGHT[variant]), MAX_HEIGHT[variant]);
    element.style.height = `${nextHeight}px`;
  }, [variant]);

  useEffect(() => {
    resize();
  }, [resize, defaultValue, value]);

  return (
    <textarea
      {...props}
      className={`admin-form-control admin-auto-textarea admin-auto-textarea--${variant} ${className}`.trim()}
      defaultValue={defaultValue}
      onInput={(event) => {
        resize();
        onInput?.(event);
      }}
      ref={ref}
      rows={1}
      value={value}
    />
  );
}