import { jsx as e, jsxs as g } from "react/jsx-runtime";
import { useState as k, useCallback as y, createContext as P, useContext as L } from "react";
import { useProductSearch as T } from "../../hooks/product/useProductSearch.js";
import { cn as p } from "../../lib/utils.js";
import { IconButton as E } from "../atoms/icon-button.js";
import { List as _ } from "../atoms/list.js";
import { Input as j } from "../ui/input.js";
import { ProductLink as v } from "./product-link.js";
import { ProductLinkSkeleton as m } from "./product-link-skeleton.js";
import z from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/search.js";
import M from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/x.js";
const Q = 100, S = P(null);
function N() {
  const t = L(S);
  if (!t)
    throw new Error("useSearchContext must be used within a SearchProvider");
  return t;
}
function q({ initialQuery: t = "", children: i }) {
  const [r, a] = k(t), { products: o, loading: s, error: n, fetchMore: c, hasNextPage: d, isTyping: l } = T({
    query: r,
    fetchPolicy: "network-only"
  }), u = y((f) => {
    a(f);
  }, []), h = {
    query: r,
    setQuery: u,
    products: o,
    loading: s,
    error: n,
    fetchMore: c,
    hasNextPage: d,
    isTyping: l
  };
  return /* @__PURE__ */ e(S.Provider, { value: h, children: i });
}
function A({
  placeholder: t = "Search products...",
  className: i,
  inputProps: r
}) {
  const { query: a, setQuery: o } = N(), s = y(
    (n) => {
      o(n.target.value), r?.onChange?.(n);
    },
    [r, o]
  );
  return /* @__PURE__ */ g("div", { className: "relative flex flex-1 items-center rounded-full pl-4 pr-2 py-1 bg-gray-100", children: [
    /* @__PURE__ */ e("div", { className: "relative flex items-center", children: /* @__PURE__ */ e(
      z,
      {
        size: 18,
        className: p("text-accent-foreground opacity-60")
      }
    ) }),
    /* @__PURE__ */ e("div", { className: "relative flex-1 flex items-center mx-2", children: /* @__PURE__ */ e(
      j,
      {
        name: "search",
        onChange: s,
        placeholder: t,
        type: "search",
        role: "searchbox",
        autoComplete: "off",
        value: a,
        "data-testid": "search-input",
        ...r,
        className: p(
          "w-full flex overflow-hidden rounded-radius-28 border-none py-4 px-0 text-text placeholder:text-text placeholder:opacity-60",
          i
        )
      }
    ) }),
    /* @__PURE__ */ e("div", { className: "relative flex items-center", children: a === "" ? null : /* @__PURE__ */ e(
      E,
      {
        Icon: M,
        size: "sm",
        filled: !1,
        iconStyles: "",
        onClick: () => o(""),
        buttonStyles: "flex items-center rounded-radius-max bg-[var(--grayscale-l20)]"
      }
    ) })
  ] });
}
function F({
  height: t = window.innerHeight,
  renderItem: i,
  itemHeight: r = Q,
  initialStateComponent: a,
  showScrollbar: o,
  overscanCount: s = 5
}) {
  const { query: n, products: c, loading: d, fetchMore: l, hasNextPage: u, isTyping: h } = N(), f = (x, I) => i ? i(x, I) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(v, { product: x, hideFavoriteAction: !0 }, x.id) }), b = n.trim().length === 0, w = (!c || c.length === 0) && (d || h), C = (!c || c.length === 0) && !d;
  return b ? a || /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-32 text-gray-500", children: "Start typing to search for products" }) : w ? /* @__PURE__ */ g("div", { className: "flex flex-col px-4 py-4", children: [
    /* @__PURE__ */ e(m, { className: "mb-4" }),
    /* @__PURE__ */ e(m, { className: "mb-4" }),
    /* @__PURE__ */ e(m, { className: "mb-4" }),
    /* @__PURE__ */ e(m, { className: "mb-4" })
  ] }) : C ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-32 text-gray-500", children: `No products found for "${n}"` }) : /* @__PURE__ */ e(
    _,
    {
      items: c || [],
      height: t,
      renderItem: f,
      itemSizeForRow: () => r,
      fetchMore: u ? l : void 0,
      showScrollbar: o,
      overscanCount: s
    }
  );
}
function J({
  initialQuery: t,
  placeholder: i,
  inputProps: r,
  height: a,
  className: o,
  renderItem: s,
  itemHeight: n,
  onProductClick: c
}) {
  const d = (l, u) => s ? s(l, u) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
    v,
    {
      product: l,
      hideFavoriteAction: !0,
      onClick: c
    },
    l.id
  ) });
  return /* @__PURE__ */ e(q, { initialQuery: t, children: /* @__PURE__ */ g("div", { className: p("flex flex-col ", o), children: [
    /* @__PURE__ */ e("div", { className: "fixed top-0 left-0 right-0 p-4 w-full z-20 bg-background", children: /* @__PURE__ */ e(A, { placeholder: i, inputProps: r }) }),
    /* @__PURE__ */ e("div", { className: "h-14" }),
    /* @__PURE__ */ e(
      F,
      {
        height: a,
        renderItem: d,
        itemHeight: n,
        showScrollbar: !0
      }
    )
  ] }) });
}
export {
  J as Search,
  A as SearchInput,
  q as SearchProvider,
  F as SearchResultsList
};
//# sourceMappingURL=search.js.map
