"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef, useRef, useImperativeHandle } from "react";
import { MagnifyingGlass } from "../icons/MagnifyingGlass.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { useControlled } from "./hooks/useControlled.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { X } from "../icons/X.js";
const ExperimentalSearch = forwardRef(
  ({
    size,
    placeholder = "Search",
    value: controlledValue,
    defaultValue = "",
    onChange,
    disabled,
    className,
    style,
    ...props
  }, ref) => {
    const innerRef = useRef(null);
    useImperativeHandle(ref, () => innerRef.current);
    const { polyfillAttributes, polyfillElement } = useCSSPropsPolyfill("search", { size });
    const [value, setValue] = useControlled(controlledValue, defaultValue, onChange);
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: classNames([
          `group/search gds-search h-max text-white/88 -:w-64 -:max-w-full
          has-nested-hocus/search:text-white
          has-nested-disabled/search:text-white/32`,
          className
        ]),
        ...getCSSPropsAttributes("search", { size }, style),
        ...polyfillAttributes,
        children: [
          polyfillElement,
          /* @__PURE__ */ jsx(
            "input",
            {
              ref: innerRef,
              type: "search",
              placeholder: placeholder || " ",
              "aria-label": placeholder,
              value,
              disabled,
              onChange: (event) => {
                setValue(event.target.value);
              },
              className: `
            nested/search w-full rounded-full border border-white/8 bg-white/4 transition outline-none
            @prop-size-small/search:text-p14
            @prop-size-medium/search:text-p16
            @prop-size-large/search:text-p18
            placeholder:text-white/48
            placeholder:transition
            hover:border-white/16
            hover:bg-white/8
            not-placeholder-shown:border-purple/48
            not-placeholder-shown:bg-purple/8
            not-placeholder-shown:hover:border-purple/64
            not-placeholder-shown:hover:bg-purple/16
            +:focus:border-purple
            +:focus:bg-purple/8
            +:focus:placeholder:text-transparent
            ++:disabled:border-transparent
            ++:disabled:bg-white/4
            ++:disabled:placeholder:text-white/32
            @prop-size-small/search:h-8
            @prop-size-small/search:pe-8
            @prop-size-small/search:ps-7
            @prop-size-medium/search:h-10
            @prop-size-medium/search:pe-10
            @prop-size-medium/search:ps-9
            @prop-size-large/search:h-12
            @prop-size-large/search:pe-11
            @prop-size-large/search:ps-10
          `,
              ...props
            }
          ),
          /* @__PURE__ */ jsx(
            MagnifyingGlass,
            {
              alt: "",
              className: `
            absolute inset-y-0 my-auto transition pointer-events-none
            @prop-size-small/search:start-2.5
            @prop-size-small/search:prop-size-3
            @prop-size-medium/search:start-3
            @prop-size-medium/search:prop-size-4
            @prop-size-large/search:start-3.5
            @prop-size-large/search:prop-size-5
          `
            }
          ),
          /* @__PURE__ */ jsx(
            "div",
            {
              "aria-hidden": "true",
              className: `
            absolute inset-y-0 end-0 flex aspect-square h-full items-center justify-center transition-opacity pointer-events-none
            group-has-nested-placeholder-shown/search:opacity-0
            group-has-nested-disabled/search:opacity-0
          `,
              children: /* @__PURE__ */ jsx(
                "button",
                {
                  type: "button",
                  tabIndex: -1,
                  disabled,
                  onClick: () => {
                    var _a;
                    setValue("");
                    (_a = innerRef.current) == null ? void 0 : _a.focus();
                  },
                  className: `
              flex items-center justify-center rounded-full p-2 transition
              hover:bg-white/8
              hover:text-white
              active:bg-white/4
              active:text-white/64
              active:transition-none
              group-has-nested-not-placeholder-shown/search:pointer-events-previous
              @prop-size-small/search:p-1.5
            `,
                  children: /* @__PURE__ */ jsx(
                    X,
                    {
                      alt: "Clear",
                      className: `
                @prop-size-small/search:prop-size-3
                @prop-size-medium/search:prop-size-3.5
                @prop-size-large/search:prop-size-4
              `
                    }
                  )
                }
              )
            }
          )
        ]
      }
    );
  }
);
ExperimentalSearch.displayName = "ExperimentalSearch";
export {
  ExperimentalSearch
};
