import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, useId, useRef, useImperativeHandle, useState, useCallback } from "react";
import { S as StClose } from "../../StClose-BQuYK7Le.js";
import { cn } from "../utils/cn.js";
const StSearch = ({ width = 24, height = 24, color, style, ...otherProps }) => /* @__PURE__ */ jsx("svg", { id: "icon_StSearch", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width, height, style: {
  ...color && {
    "--stroke-color": color,
    "--stroke-fg-color": color
  },
  ...style
}, ...otherProps, children: /* @__PURE__ */ jsx("path", { d: "M15 14.899C16.2372 13.6364 17 11.9073 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C11.9587 17 13.7295 16.1955 15 14.899ZM15 14.899L19.5 19.5", stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke", strokeLinecap: "square" }) });
StSearch.displayName = "StSearch";
const Input = forwardRef(
  ({
    className,
    label,
    description,
    error,
    hint,
    required,
    type = "text",
    value,
    defaultValue,
    onChange,
    ...props
  }, ref) => {
    const id = useId();
    const descriptionId = `${id}-description`;
    const errorId = `${id}-error`;
    const hintId = `${id}-hint`;
    const innerRef = useRef(null);
    useImperativeHandle(ref, () => innerRef.current);
    const [internalValue, setInternalValue] = useState(
      defaultValue?.toString() || ""
    );
    const isControlled = value !== void 0;
    const currentValue = isControlled ? value : internalValue;
    const handleChange = (e) => {
      if (!isControlled) {
        setInternalValue(e.target.value);
      }
      onChange?.(e);
    };
    const handleClear = useCallback(
      (e) => {
        e.preventDefault();
        e.stopPropagation();
        const input = innerRef.current;
        if (!input) return;
        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
          window.HTMLInputElement.prototype,
          "value"
        )?.set;
        if (nativeInputValueSetter) {
          nativeInputValueSetter.call(input, "");
          const event = new Event("input", { bubbles: true });
          input.dispatchEvent(event);
        }
        if (!isControlled) {
          setInternalValue("");
        }
      },
      [isControlled]
    );
    const showClearButton = type === "search" && String(currentValue ?? "").length > 0;
    const inputElement = /* @__PURE__ */ jsxs("div", { className: "relative", children: [
      type === "search" && /* @__PURE__ */ jsx(StSearch, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-subtle pointer-events-none" }),
      /* @__PURE__ */ jsx(
        "input",
        {
          ref: innerRef,
          id,
          type,
          required,
          ...isControlled ? { value } : { defaultValue },
          onChange: handleChange,
          "aria-invalid": error ? true : void 0,
          "aria-describedby": [description && descriptionId, hint && hintId, error && errorId].filter(Boolean).join(" ") || void 0,
          className: cn(
            "block w-full rounded-lg bg-input py-2 text-strong",
            type === "search" ? "pl-8 pr-8" : "px-3",
            "placeholder:text-subtle",
            "focus:outline-none focus:ring-2 focus:ring-ring",
            "disabled:text-disabled disabled:placeholder:text-disabled",
            error && "ring-2 ring-negative focus:ring-negative",
            // Hide native clear button
            type === "search" && "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
            className
          ),
          ...props
        }
      ),
      showClearButton && /* @__PURE__ */ jsx(
        "button",
        {
          type: "button",
          onClick: handleClear,
          onMouseDown: (e) => e.preventDefault(),
          className: "absolute right-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center h-5 w-5 rounded-full bg-default-inverse text-default-inverse transition-opacity opacity-60 hover:opacity-100 cursor-pointer",
          "aria-label": "Clear search",
          children: /* @__PURE__ */ jsx(StClose, { className: "h-3 w-3" })
        }
      )
    ] });
    return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
      label && /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "block font-medium text-strong", children: [
          label,
          required && /* @__PURE__ */ jsx("span", { className: "text-negative ml-1", children: "*" })
        ] }),
        description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-sm text-subtle", children: description })
      ] }),
      hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-sm text-subtle", children: hint }),
      inputElement,
      error && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-sm text-negative", children: error })
    ] });
  }
);
Input.displayName = "Input";
export {
  Input
};
