'use strict';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Icon, iconNames } from '../../../fd-component-toolbox/icon/Icon.js';
import { isMacOs } from '../../../meta/services/client-environment.js';
import { Input } from '../../../fd-component-toolbox/input/Input.js';
import { cn } from '../../../../fd-toolbox/lib/utils.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function SearchInput({
  searchQuery,
  onSearchQueryChanged,
  onOpenDialog,
  parentContextName,
  className,
  useCustomInputStyle,
  ref
}) {
  const isQueryNotEmpty = !!searchQuery;
  const baseInputStyle = "peer rounded-md px-10 py-1.5 focus:bg-popover focus:text-popover-foreground border-transparent shadow-none hover:border-transparent focus:border-transparent";
  const queryNotEmptyStyle = "bg-popover text-popover-foreground";
  const emptyQueryStyle = "bg-fd-tertiary-700 placeholder:text-fd-tertiary-50 focus:placeholder:text-fd-tertiary-700";
  const queryStyle = isQueryNotEmpty ? queryNotEmptyStyle : emptyQueryStyle;
  return /* @__PURE__ */jsxs("div", {
    className: cn("group relative flex w-full items-center md:max-w-screen-sm", className),
    children: [/* @__PURE__ */jsx("div", {
      className: "relative grow",
      children: /* @__PURE__ */jsx("div", {
        className: "group relative flex w-full items-center",
        children: /* @__PURE__ */jsx(Input, {
          inputId: parentContextName,
          type: "text",
          placeholder: "Search",
          className: useCustomInputStyle ? "mt-0 px-10" : cn(baseInputStyle, queryStyle, "mt-0"),
          value: searchQuery,
          onChange: onSearchQueryChanged,
          onFocus: onOpenDialog,
          onClick: onOpenDialog,
          variant: useCustomInputStyle ? "float" : "bordered",
          ref
        })
      })
    }), /* @__PURE__ */jsxs("label", {
      htmlFor: parentContextName,
      className: cn("text-fd-tertiary-200 absolute top-1/2 right-4 flex -translate-y-1/2 items-center gap-1 text-xs peer-focus:hidden", isQueryNotEmpty && "hidden"),
      children: [/* @__PURE__ */jsx("span", {
        className: "border-fd-tertiary-200 rounded-md border px-1",
        children: isMacOs() ? "\u2318" : "Ctrl"
      }), /* @__PURE__ */jsx("span", {
        className: "border-fd-tertiary-200 rounded-md border px-1",
        children: "K"
      })]
    }), /* @__PURE__ */jsx("label", {
      htmlFor: parentContextName,
      className: "absolute top-1/2 left-3.5 -translate-y-1/2",
      children: /* @__PURE__ */jsx(Icon, {
        name: iconNames.magnifyingGlass,
        className: cn(isQueryNotEmpty ? "text-muted-foreground" : "text-fd-tertiary-50 group-focus-within:text-muted-foreground", useCustomInputStyle && "text-muted-foreground")
      })
    })]
  });
}
__name(SearchInput, "SearchInput");

export { SearchInput };
