"use client";
import { jsx as t, jsxs as i } from "react/jsx-runtime";
import { classNames as d } from "../../utils/index.js";
import { Root as H, Viewport as O, Scrollbar as $, Thumb as q, Corner as K } from "../../../../../node_modules/.pnpm/@radix-ui_react-scroll-area@1.2.3_@types_react-dom@19.0.4_@types_react@19.0.10__@types_react@_kljz5v43jbme6rgnkxsykfv6c4/node_modules/@radix-ui/react-scroll-area/dist/index.js";
import { useVirtualizer as Q } from "../../../../../node_modules/.pnpm/@tanstack_react-virtual@3.13.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@tanstack/react-virtual/dist/esm/index.js";
import "../../../../../node_modules/.pnpm/axios@1.9.0/node_modules/axios/index.js";
import { useState as n, useRef as R, useEffect as p } from "react";
import { BiSearch as D } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { FiCheck as P } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { LuChevronsUpDown as Y } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lu/index.js";
import { Button as _ } from "./button.js";
import { Popover as c } from "./popover.js";
import { useQuery as A } from "../../../../../node_modules/.pnpm/@tanstack_react-query@5.80.6_react@19.0.0/node_modules/@tanstack/react-query/build/modern/useQuery.js";
import G from "../../../../../node_modules/.pnpm/axios@1.9.0/node_modules/axios/lib/axios.js";
const M = 35, y = "AIzaSyCn6E9t1_hK5zgcgbY2qHEwNDFHvhycgBc", ne = ({
  value: w,
  onChange: m,
  className: v,
  side: N = "bottom",
  align: z = "center",
  avoidCollisions: S = !0
}) => {
  const [C, k] = n(), [f, h] = n(!1), [u, x] = n(""), g = R(null), [r, E] = n(void 0), s = w ?? C, {
    data: F = [],
    isLoading: T,
    error: I
  } = A({
    queryKey: ["fonts", y],
    queryFn: async () => (await G.get(
      `https://www.googleapis.com/webfonts/v1/webfonts?key=${y}`
    )).data.items,
    staleTime: 1e3 * 60 * 60
    // Cache for 1 hour
  }), a = F.filter(
    (e) => e.family.toLowerCase().includes(u.toLowerCase())
  ), l = Q({
    count: a.length,
    getScrollElement: () => g.current,
    estimateSize: () => M,
    overscan: 0
    // Number of items to render outside of the visible area
  }), L = (e) => {
    e || x(""), h(e);
  }, V = (e) => {
    x(e.target.value);
  }, j = (e, o) => {
    k(e), h(!1), m == null || m(e);
  };
  return p(() => {
    import("../../../../../_virtual/webfontloader.js").then((e) => e.w).then((e) => {
      E(e.default);
    });
  }, []), p(() => {
    if (f) {
      const o = l.getVirtualItems().map((B) => {
        var b;
        return (b = a[B.index]) == null ? void 0 : b.family;
      }).filter(Boolean);
      o.length > 0 && (r == null || r.load({
        google: {
          families: o
        }
      }));
    }
  }, [r, l.getVirtualItems(), f, a]), p(() => {
    s && (r == null || r.load({
      google: {
        families: [s]
      }
    }));
  }, [r, s]), T ? /* @__PURE__ */ t("div", { className: "text-sm text-gray-500", children: "Loading fonts..." }) : I ? /* @__PURE__ */ t("div", { className: "text-sm text-red-500", children: "Error loading fonts" }) : /* @__PURE__ */ i(c, { onOpenChange: L, children: [
    /* @__PURE__ */ t(c.Trigger, { asChild: !0, children: /* @__PURE__ */ i(
      _,
      {
        variant: "outline",
        role: "combobox",
        className: d(
          "border-dark-300 w-full justify-between whitespace-nowrap",
          v
        ),
        "aria-expanded": f,
        "aria-haspopup": "listbox",
        children: [
          s ?? "Select a font",
          /* @__PURE__ */ t(Y, { className: "ms-2 h-4 shrink-0 opacity-50" })
        ]
      }
    ) }),
    /* @__PURE__ */ i(
      c.Content,
      {
        className: "w-[260px] p-0",
        side: N,
        align: z,
        avoidCollisions: S,
        children: [
          /* @__PURE__ */ i("div", { className: "flex items-center border-b", children: [
            /* @__PURE__ */ t("div", { className: "ms-2.5 flex w-7 items-center justify-center", children: /* @__PURE__ */ t(D, { className: " text-dark-500", size: 18 }) }),
            /* @__PURE__ */ t(
              "input",
              {
                value: u,
                onChange: V,
                type: "text",
                className: "w-full border-0 px-1 text-sm placeholder:text-sm focus:ring-0",
                placeholder: "Search..."
              }
            )
          ] }),
          a.length === 0 ? /* @__PURE__ */ t("div", { className: "p-4 text-center text-sm text-gray-500", children: "No fonts found" }) : /* @__PURE__ */ i(
            H,
            {
              className: "w-full",
              style: {
                height: a.length > 8 ? "285px" : "auto"
              },
              children: [
                /* @__PURE__ */ t(O, { ref: g, className: "h-full w-full", children: /* @__PURE__ */ t(
                  "div",
                  {
                    style: {
                      height: `${l.getTotalSize()}px`,
                      width: "100%",
                      position: "relative"
                    },
                    children: l.getVirtualItems().map((e) => {
                      const o = a[e.index];
                      return /* @__PURE__ */ t(c.Close, { children: /* @__PURE__ */ i(
                        "div",
                        {
                          className: d(
                            "font-item hover:bg-dark-100 absolute left-0 top-0 flex w-full cursor-pointer items-center gap-2 px-4 text-sm",
                            o.family.length > 25 ? "text-xs" : "text-sm"
                          ),
                          style: {
                            height: `${e.size}px`,
                            transform: `translateY(${e.start}px)`,
                            fontFamily: o.family
                          },
                          onClick: () => j(o.family, e.index),
                          role: "option",
                          "aria-selected": s === o.family,
                          children: [
                            o.family,
                            s === o.family && /* @__PURE__ */ t(
                              P,
                              {
                                className: d(
                                  "ms-auto h-4 w-4",
                                  s === o.family ? "opacity-100" : "opacity-0"
                                )
                              }
                            )
                          ]
                        }
                      ) }, e.key);
                    })
                  }
                ) }),
                /* @__PURE__ */ t(
                  $,
                  {
                    className: "flex touch-none select-none bg-zinc-100 p-0.5 transition-colors duration-150 ease-out hover:bg-zinc-200 data-[orientation=vertical]:w-2.5",
                    orientation: "vertical",
                    children: /* @__PURE__ */ t(q, { className: "relative flex-1 rounded-lg bg-zinc-300 before:absolute before:left-1/2 before:top-1/2 before:h-full before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:bg-zinc-400" })
                  }
                ),
                /* @__PURE__ */ t(K, { className: "bg-zinc-200" })
              ]
            }
          )
        ]
      }
    )
  ] });
};
export {
  ne as FontSelector
};
//# sourceMappingURL=font-selector.js.map
