"use client";
import { j as r } from "../../../node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.mjs";
import { useRef as D, useCallback as L } from "react";
import S from "../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/debounce.mjs";
import { Popover as a } from "@mantine/core";
import u from "../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.mjs";
import { ReactComponent as k } from "../../assets/images/CloseButton.svg.mjs";
import { ReactComponent as E } from "../../assets/images/MagnifyingGlass.svg.mjs";
import i from "./SearchBar.module.scss.mjs";
function H({
  i18n: { placeholder: v },
  setSearchText: h,
  suggestions: p,
  onClickSuggestion: f,
  inputProps: t,
  classNames: o,
  styles: c,
  itemComponent: j,
  ...C
}) {
  var w;
  const e = D(null), x = L(
    (n) => {
      e.current && (e.current.value = n, h(n), e.current.focus());
    },
    [e]
  ), B = () => {
    x("");
  }, d = (w = e.current) == null ? void 0 : w.value, b = ((d == null ? void 0 : d.length) ?? 0) > 0, m = p ?? [], R = (n) => {
    if (f) {
      f(n);
      return;
    }
    e.current && x(n);
  };
  let l = null;
  m.length > 0 ? l = /* @__PURE__ */ r.jsx(r.Fragment, { children: m.map((n) => /* @__PURE__ */ r.jsx(
    "button",
    {
      onClick: () => R(n),
      className: i.searchResult,
      children: j ? /* @__PURE__ */ r.jsx(j, { suggestion: n }) : n
    },
    n
  )) }) : d && (l = /* @__PURE__ */ r.jsx("div", { children: "No results" }));
  const g = {};
  return g[i.hideDropdown] = l === null, /* @__PURE__ */ r.jsxs(
    a,
    {
      width: "target",
      classNames: {
        dropdown: u(
          i.popoverDropdown,
          g,
          o == null ? void 0 : o.dropdown
        ),
        arrow: o == null ? void 0 : o.arrow
      },
      unstyled: !0,
      ...C,
      children: [
        /* @__PURE__ */ r.jsx(a.Target, { children: /* @__PURE__ */ r.jsxs(
          "div",
          {
            className: u(i.searchBar, o == null ? void 0 : o.container),
            style: c == null ? void 0 : c.container,
            children: [
              /* @__PURE__ */ r.jsx("button", { className: i.searchButton, children: /* @__PURE__ */ r.jsx(E, { fill: "var(--color-neutral-400)" }) }),
              /* @__PURE__ */ r.jsx(
                "input",
                {
                  ref: e,
                  type: "text",
                  placeholder: v,
                  ...t,
                  onInput: S((n) => {
                    t != null && t.onChange && t.onChange(n), h(n.target.value);
                  }, 350),
                  className: u("body-sm", t == null ? void 0 : t.className)
                }
              ),
              b ? /* @__PURE__ */ r.jsx(
                "button",
                {
                  className: i.clearButton,
                  onClick: B,
                  children: /* @__PURE__ */ r.jsx(k, { fill: "var(--color-neutral-400)" })
                }
              ) : null
            ]
          }
        ) }),
        /* @__PURE__ */ r.jsx(a.Dropdown, { children: /* @__PURE__ */ r.jsx(
          "div",
          {
            className: u(
              i.popoverDropdownList,
              o == null ? void 0 : o.dropdownList
            ),
            style: c == null ? void 0 : c.dropdownList,
            children: l
          }
        ) })
      ]
    }
  );
}
export {
  H as default
};
//# sourceMappingURL=index.mjs.map
