'use strict';
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { Button } from '../button/Button.js';
import { Icon } from '../icon/Icon.js';
import { LabelAnimation } from '../animation/LabelAnimation.js';
import { cva } from 'class-variance-authority';
import { hasMultipleInputActions, onInputBlur, onInputFocus, onInputChange, onClearInput } from './Input.funcs.js';
import { elementSuffixes } from '../../../fd-toolbox/constants/element-suffixes.js';
import { useEmptyRef } from '../../../fd-toolbox/hooks/use-empty-ref.js';
import { booleanStringValues } from '../../../base-repo/constants/type-string-values.js';
import { componentVariantNames, accessibilityAttributeNames } from '../../../fd-toolbox/constants/html-constants.js';
import { rootLayoutMetadata } from '../../../base-repo/app-constants/internal-system-constants.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
const inputVariants = cva("border-transparent transition", {
  variants: {
    variant: {
      bordered: "border-input hover:border-ring focus:border-ring rounded-md border shadow-sm",
      float: "border-border hover:border-fd-accent focus:border-fd-accent border-b transition"
    }
  },
  defaultVariants: {
    variant: componentVariantNames.float
  }
});
function Input({
  className,
  inputId,
  showClearIcon,
  value,
  onChange,
  onClear,
  onBlur,
  label,
  skipAnimationOnce,
  variant,
  children: icons,
  disableFocus,
  ref,
  defaultValue,
  disabled,
  [accessibilityAttributeNames.ariaInvalid]: ariaInvalid,
  readOnly,
  required,
  placeholder,
  onClick,
  style,
  onChangeCapture,
  min,
  max,
  maxLength,
  onFocus,
  type,
  id
}) {
  const error = !!ariaInvalid && ariaInvalid !== booleanStringValues.false;
  const [isInFocus, setIsInFocus] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const iconsBlockRef = useEmptyRef();
  useEffect(() => {
    if (value) {
      setInputValue(value);
    } else {
      setInputValue("");
    }
  }, [value]);
  const shouldLabelAnimate = !!value || !!defaultValue || isInFocus;
  const activeVariant = variant ?? componentVariantNames.float;
  const isFloatVariant = activeVariant === componentVariantNames.float;
  const shouldOverlayClearIcon = !!icons && !hasMultipleInputActions(icons);
  return /* @__PURE__ */jsxs("div", {
    className: cn("group relative flex h-8 w-full"),
    children: [/* @__PURE__ */jsx("input", {
      ref,
      type,
      value: inputValue,
      onChange: e => onInputChange(e, setInputValue, onChange),
      className: cn(inputVariants({
        variant
      }), "bg-background file:text-foreground placeholder:text-muted-foreground mt-1 flex w-full pr-1 pl-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus:placeholder-transparent focus-visible:outline-none disabled:cursor-not-allowed", isFloatVariant && "group-hover:border-fd-accent group-focus-within:border-fd-accent", className, error && "border-destructive border focus-visible:outline-none"),
      id: inputId,
      required,
      maxLength,
      placeholder,
      tabIndex: disableFocus ? -1 : 0,
      readOnly,
      style,
      min,
      max,
      "aria-invalid": ariaInvalid,
      onChangeCapture,
      onClick,
      onFocus: () => onInputFocus(setIsInFocus, disableFocus, onFocus),
      onBlur: e_0 => onInputBlur(e_0, setIsInFocus, onBlur)
    }), /* @__PURE__ */jsxs("div", {
      className: cn("bg-background z-10 mt-1 flex h-7 items-center justify-end overflow-visible", isFloatVariant && "border-border group-hover:border-fd-accent group-focus-within:border-fd-accent border-b transition", error && "border-destructive"),
      children: [!disabled && showClearIcon && value && (() => {
        const baseClasses = "size-4 p-0 transition-[transform,opacity]";
        let positionClasses = "absolute right-1 top-1/2 -translate-y-1/2";
        if (icons) {
          if (shouldOverlayClearIcon) {
            positionClasses = "absolute top-[calc(50%+2px)] right-6 -translate-y-1/2 bg-background";
          } else {
            positionClasses = "mx-1 translate-y-0";
          }
        }
        const visibilityClasses = isFloatVariant && cn("pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100", !shouldOverlayClearIcon && "group-focus-within:pointer-events-auto group-focus-within:opacity-100");
        return /* @__PURE__ */jsx(Button, {
          variant: rootLayoutMetadata.icon,
          size: "icon",
          type: "button",
          onClick: () => onClearInput(setInputValue, setIsInFocus, onChange, onClear),
          tabIndex: -1,
          className: cn(baseClasses, positionClasses, visibilityClasses),
          children: /* @__PURE__ */jsx(Icon, {
            name: "eraser"
          })
        });
      })(), label && /* @__PURE__ */jsx(LabelAnimation, {
        forElementId: inputId,
        className: "max-w-fit",
        label,
        shouldAnimate: shouldLabelAnimate,
        errorStyle: error,
        skipAnimationOnce,
        variant: variant ?? componentVariantNames.float
      }), icons && /* @__PURE__ */jsx("div", {
        id: id + elementSuffixes.edit,
        ref: iconsBlockRef,
        className: "bg-background z-10 flex items-center pr-1",
        children: icons
      })]
    })]
  });
}
__name(Input, "Input");
Input.displayName = elementSuffixes.input;

export { Input, inputVariants };
