Autosize textareas

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

/* Autosize textarea family: 5 multi-line fields that change the height behavior.
   The difference is only the height policy: growing with the content, capped,
   floored, fluid and fixed. The growth is done with a single scrollHeight
   measurement (the height is first set to auto, then written to scrollHeight) and
   runs ONLY on mount and on input, not on every render; that way there is no layout
   thrash. The cap/floor is given with CSS max-h/min-h and the inline height stays
   within them; the floor derives from the size axis, which is why size stays
   meaningful in every variant. A height change is a layout measure, not an
   animation; that is why motion/react is not needed. Color comes ONLY from tokens.
   Each one wraps a real <textarea> and passes through all the native props. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const height: Record<StyledSize, string> = {
  sm: "min-h-16 text-sm",
  md: "min-h-20 text-sm",
  lg: "min-h-24 text-base",
  xl: "min-h-28 text-base",
}

/* Min varyantinin comert tabani; size ile birlikte olceklenir. */
const floor: Record<StyledSize, string> = {
  sm: "min-h-24",
  md: "min-h-32",
  lg: "min-h-40",
  xl: "min-h-48",
}

const areaBase =
  "w-full rounded-lg border border-field-border bg-transparent px-3 py-2 text-foreground outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40"

type Props = React.ComponentProps<"textarea"> & { size?: StyledSize }

/* A hook that measures height from the content. The measurement is triggered only on mount and on input, not in the render loop. */
function useAutosize() {
  const ref = React.useRef<HTMLTextAreaElement>(null)

  const measure = React.useCallback(() => {
    const el = ref.current
    if (!el) return
    el.style.height = "auto"
    el.style.height = `${el.scrollHeight}px`
  }, [])

  React.useEffect(() => {
    measure()
  }, [measure])

  return { ref, measure }
}

/* Shared field: it carries an accessible name instead of a visible label (aria-label), which the consumer can override through props. When autosize is off the measurement is never wired up. */
function AutosizeField({
  className,
  size = "md",
  autosize,
  onChange,
  ...props
}: Props & { autosize: boolean }) {
  const { ref, measure } = useAutosize()

  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
    if (autosize) measure()
    onChange?.(e)
  }

  return (
    <textarea
      ref={autosize ? ref : undefined}
      rows={1}
      aria-label="Message"
      {...props}
      onChange={handleChange}
      className={cn(areaBase, height[size], className)}
    />
  )
}

/* Grow: it grows as content is added; no handle, no ceiling. */
export function GrowTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span data-slot="styled-textarea" className="flex w-72 max-w-full flex-col">
      <AutosizeField autosize size={size} {...props} className={cn("resize-none overflow-hidden", className)} />
    </span>
  )
}

/* Max: it grows with the content but stops at a ceiling and lets scrolling take
   over. */
export function MaxTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span data-slot="styled-textarea" className="flex w-72 max-w-full flex-col">
      <AutosizeField autosize size={size} {...props} className={cn("max-h-40 resize-none overflow-y-auto", className)} />
    </span>
  )
}

/* Min: it starts from a generous floor, never goes below it, and grows with the
   content. */
export function MinTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span data-slot="styled-textarea" className="flex w-72 max-w-full flex-col">
      <AutosizeField autosize size={size} {...props} className={cn(floor[size], "resize-none overflow-hidden", className)} />
    </span>
  )
}

/* Fluid: takes the full width, flowing from the size baseline up to a ceiling. */
export function FluidTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span data-slot="styled-textarea" className="flex w-full max-w-full flex-col">
      <AutosizeField autosize size={size} {...props} className={cn("max-h-64 resize-none overflow-y-auto", className)} />
    </span>
  )
}

/* Fixed: no growth; the height is fixed by size and overflowing content scrolls. */
export function FixedTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span data-slot="styled-textarea" className="flex w-72 max-w-full flex-col">
      <AutosizeField autosize={false} size={size} {...props} className={cn("resize-none overflow-y-auto", className)} />
    </span>
  )
}