"use client";
import { jsx as a, jsxs as l } from "react/jsx-runtime";
import { useState as g, useRef as p, useEffect as x } from "react";
import { Button as v } from "../../../button.js";
import { cn as z } from "../../../../../lib/utils.js";
import { Tooltip as D, TooltipTrigger as E, TooltipContent as L } from "../../../tooltip.js";
function K({
  searchableColumnsHeaders: b = [],
  i18n: i,
  className: T = "",
  onSearch: u,
  debounceMs: h = 300,
  initialValue: t,
  id: S,
  "data-testid": C
}) {
  const [s, c] = g(t || ""), [f, o] = g(
    !!(t && t.length > 0)
  ), B = "search_input_" + Math.random().toString(36).substring(2, 9), N = S ?? B, d = p(null), n = p(null);
  x(() => {
    t && t.length > 0 ? (c(t), o(!0)) : (t === "" || t === void 0) && (c(""), o(!1));
  }, [t]), x(() => (u && (n.current && clearTimeout(n.current), n.current = setTimeout(() => {
    u(s);
  }, h)), () => {
    n.current && clearTimeout(n.current);
  }), [s, u, h]);
  const k = () => {
    f ? d.current?.focus() : (o(!0), setTimeout(() => {
      d.current?.focus();
    }, 10));
  }, w = (e) => {
    e.preventDefault(), e.stopPropagation(), c(""), o(!1), setTimeout(() => {
      e?.currentTarget?.closest(".relative")?.querySelector('button[aria-label="Search"]')?.focus();
    }, 0);
  }, y = (e) => {
    const r = e.relatedTarget, m = !e.currentTarget.contains(r), q = r?.parentElement?.getAttribute("aria-label") === "Search", I = r?.closest(
      'button[aria-label="Clear search"]'
    );
    m && !q && !I && s === "" && (o(!1), setTimeout(() => {
      e?.currentTarget?.closest(".relative")?.querySelector('button[aria-label="Search"]')?.focus();
    }, 0));
  };
  return /* @__PURE__ */ a("div", { className: z("relative", T), children: /* @__PURE__ */ l("div", { className: "flex items-center", children: [
    /* @__PURE__ */ l(D, { children: [
      /* @__PURE__ */ a(E, { asChild: !0, children: /* @__PURE__ */ a(
        v,
        {
          className: "h-6 w-6",
          iconLeft: "Search",
          size: "icon",
          variant: "ghost",
          onClick: k,
          "aria-label": i.search
        }
      ) }),
      /* @__PURE__ */ l(
        L,
        {
          className: "flex max-h-24 min-h-0 flex-col gap-0 px-2 py-1.5",
          variant: "card",
          align: "end",
          children: [
            /* @__PURE__ */ a("div", { className: "text-d-foreground/90 text-xs", children: i.searchTooltipLabel }),
            /* @__PURE__ */ a("ul", { className: "flex flex-col gap-0 overflow-auto", children: b.map((e) => /* @__PURE__ */ l("li", { className: "text-d-foreground/75 text-xs", children: [
              "⋅ ",
              e
            ] }, e)) })
          ]
        }
      )
    ] }),
    /* @__PURE__ */ a(
      "div",
      {
        className: `overflow-hidden transition-all duration-300 ease-in-out ${f ? "w-52" : "w-0"}`,
        onBlur: y,
        children: /* @__PURE__ */ l("div", { className: "flex w-52 items-center", children: [
          /* @__PURE__ */ a(
            "input",
            {
              ref: d,
              id: N,
              "data-testid": C,
              className: "bg-background placeholder:text-muted-foreground h-8 flex-1 rounded-md border-0 px-2 py-1 text-xs outline-none",
              placeholder: i.searchPlaceholder,
              value: s,
              onChange: (e) => {
                c(e.target.value);
              },
              onKeyDown: (e) => {
                if (e.key === "Escape") {
                  const r = e.target;
                  r.value ? (c(""), r.focus()) : (o(!1), r.closest(".relative")?.querySelector(
                    'button[aria-label="Search"]'
                  )?.focus());
                }
              }
            }
          ),
          s !== "" && /* @__PURE__ */ a(
            v,
            {
              className: "text-muted-foreground hover:text-foreground hover:text-d-destructive absolute top-1 right-0 size-6",
              iconLeft: "X",
              size: "icon",
              variant: "ghost",
              onClick: w,
              "aria-label": i.clearSearch
            }
          )
        ] })
      }
    )
  ] }) });
}
export {
  K as DataTableSearchbar
};
