"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useForkRef } from "@base-ui-components/react/utils";
import { forwardRef, useRef } from "react";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { useI18n } from "../i18n/useI18n.js";
import { useControlled } from "./hooks/useControlled.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { MagnifyingGlass } from "../icons/MagnifyingGlass.js";
import { X } from "../icons/X.js";
const ExperimentalSearch = forwardRef(
  ({
    size,
    placeholder: passedPlaceholder,
    value: controlledValue,
    defaultValue,
    onChange,
    disabled,
    className,
    style,
    ...props
  }, forwardedRef) => {
    const inputRef = useRef(null);
    const inputForwardedRef = useForkRef(inputRef, forwardedRef);
    const [propsPolyfillRef, propsPolyfillAttributes] = useCSSPropsPolyfill("search", { size });
    const { t } = useI18n();
    const placeholder = passedPlaceholder ?? t("components.search.defaultPlaceholder");
    const [value, setValue] = useControlled(controlledValue, defaultValue ?? "", onChange);
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref: propsPolyfillRef,
        className: classNames(["gds-search flex -:w-64 -:max-w-full +:h-max", className]),
        ...getCSSPropsAttributes("search", { size }, style),
        ...propsPolyfillAttributes,
        children: /* @__PURE__ */ jsxs(
          "div",
          {
            className: `
            group/search flex w-full rounded-full border border-space-1300 bg-space-1500 text-white transition
            -:*:transition-opacity
            has-nested-enabled/search:has-[:is(input,button):hover]:border-space-1200
            has-nested-enabled/search:has-[:is(input,button):hover]:bg-space-1400
            has-nested-disabled/search:border-transparent
            -:*:has-nested-disabled/search:opacity-40
            has-nested-enabled/search:has-nested-not-placeholder-shown/search:border-purple-800
            has-nested-enabled/search:has-nested-not-placeholder-shown/search:bg-purple-1100
            has-nested-enabled/search:has-nested-not-placeholder-shown/search:has-[:is(input,button):hover]:border-purple-700
            has-nested-enabled/search:has-nested-not-placeholder-shown/search:has-[:is(input,button):hover]:bg-purple-1000
            @prop-size-small/search:h-8
            @prop-size-small/search:text-14
            @prop-size-medium/search:h-10
            @prop-size-medium/search:text-16
            @prop-size-large/search:h-12
            @prop-size-large/search:text-18
            +:has-nested-enabled/search:has-[:is(input:focus,button:active)]:border-focus
            +:has-nested-enabled/search:has-[:is(input:focus,button:active)]:bg-purple-1100
          `,
            children: [
              /* @__PURE__ */ jsx(
                MagnifyingGlass,
                {
                  alt: "",
                  className: `
              absolute inset-y-0 my-auto
              @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(
                "input",
                {
                  ref: inputForwardedRef,
                  type: "search",
                  placeholder,
                  "aria-label": placeholder,
                  value,
                  disabled,
                  onChange: (event) => {
                    setValue(event.target.value);
                  },
                  className: `
              nested/search grow outline-none
              focus:placeholder:text-transparent
              @prop-size-small/search:ps-7
              @prop-size-medium/search:ps-9
              @prop-size-large/search:ps-11
            `,
                  ...props
                }
              ),
              /* @__PURE__ */ jsx(
                "button",
                {
                  type: "button",
                  tabIndex: -1,
                  disabled,
                  onClick: () => {
                    var _a;
                    setValue("");
                    (_a = inputRef.current) == null ? void 0 : _a.focus();
                  },
                  className: `
              group/search-clear flex aspect-square h-full shrink-0 items-center justify-center outline-none
              group-has-nested-placeholder-shown/search:hidden
              group-has-nested-disabled/search:hidden
            `,
                  children: /* @__PURE__ */ jsx(
                    "span",
                    {
                      className: `
                flex items-center justify-center rounded-full transition
                group-hover/search-clear:bg-white/10
                group-active/search-clear:bg-white/5
                group-active/search-clear:transition-none
                @prop-size-small/search:size-7
                @prop-size-medium/search:size-7.5
                @prop-size-large/search:size-8
              `,
                      children: /* @__PURE__ */ jsx(
                        X,
                        {
                          alt: t("components.search.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
};
