'use strict';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { LabelAnimation } from '../animation/LabelAnimation.js';
import { onIncomingValueChange, onTextAreaBlur, onTextAreaValueChange } from './TextArea.funcs.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function Textarea({
  placeholder,
  onChange,
  label,
  value,
  onBlur,
  skipAnimationOnce,
  id,
  readOnly,
  className,
  ref,
  ariaInvalid
}) {
  const [isInFocus, setIsInFocus] = useState(false);
  const [textareaValue, setTextareaValue] = useState("");
  useEffect(() => {
    onIncomingValueChange(value, setTextareaValue);
  }, [value]);
  const shouldLabelAnimate = !!value || !!placeholder || isInFocus;
  return /* @__PURE__ */jsxs("div", {
    className: "relative",
    children: [/* @__PURE__ */jsx("textarea", {
      id,
      readOnly,
      ref,
      onChange: e => onTextAreaValueChange(e, setTextareaValue, onChange),
      value: textareaValue,
      className: cn("border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-20 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-sm focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", ariaInvalid && "border-destructive focus-visible:outline-none", className),
      placeholder,
      onFocus: () => setIsInFocus(true),
      onBlur: e_0 => onTextAreaBlur(e_0, setIsInFocus, onBlur)
    }), /* @__PURE__ */jsx(LabelAnimation, {
      className: "max-w-full",
      label,
      shouldAnimate: shouldLabelAnimate,
      errorStyle: ariaInvalid,
      skipAnimationOnce
    })]
  });
}
__name(Textarea, "Textarea");
Textarea.displayName = "Textarea";

export { Textarea };
