import { jsx as o, jsxs as v } from "react/jsx-runtime";
import * as N from "react";
import { useState as A, useCallback as C, useMemo as k, useContext as z } from "react";
import { useShopNavigation as B } from "../../hooks/navigation/useShopNavigation.js";
import { useSavedProductsActions as V } from "../../hooks/user/useSavedProductsActions.js";
import { formatMoney as j } from "../../lib/formatMoney.js";
import { cn as s } from "../../lib/utils.js";
import { Image as T } from "../atoms/image.js";
import { ProductVariantPrice as E } from "../atoms/product-variant-price.js";
import { Touchable as O } from "../atoms/touchable.js";
import { Badge as S } from "../ui/badge.js";
import { FavoriteButton as L } from "./favorite-button.js";
const b = N.createContext(void 0);
function u() {
  const t = z(b);
  if (!t)
    throw new Error(
      "ProductCard components must be used within a ProductCard provider"
    );
  return t;
}
function M({
  className: t,
  ...e
}) {
  const { touchable: r, onClick: a } = u(), n = /* @__PURE__ */ o(
    "div",
    {
      className: s(
        "relative size-full overflow-hidden rounded-xl border-0",
        t
      ),
      ...e
    }
  );
  return r && a ? /* @__PURE__ */ o(
    O,
    {
      onClick: a,
      whileTap: { opacity: 0.7 },
      transition: {
        opacity: { type: "tween", duration: 0.08, ease: "easeInOut" }
      },
      children: n
    }
  ) : n;
}
function R({
  className: t,
  ...e
}) {
  const { variant: r } = u();
  return /* @__PURE__ */ o(
    "div",
    {
      "data-slot": "product-card-image-container",
      className: s(
        "relative overflow-hidden rounded-xl border border-gray-200",
        "aspect-square",
        r === "compact" ? "min-h-[104px]" : "min-h-[134px]",
        t
      ),
      ...e
    }
  );
}
function q({ className: t, ...e }) {
  const { product: r, selectedProductVariant: a } = u(), n = a?.image || r.featuredImage, i = n?.url, d = n?.altText || r.title, c = r.featuredImage?.thumbhash, p = C(
    (l) => c ? /* @__PURE__ */ o(
      T,
      {
        "data-slot": "product-card-image",
        src: l,
        alt: d,
        aspectRatio: 1,
        thumbhash: c,
        objectFit: "cover",
        className: s("size-full", t),
        ...e
      }
    ) : /* @__PURE__ */ o(
      "img",
      {
        "data-slot": "product-card-image",
        src: l,
        alt: d,
        className: s("size-full object-cover", t),
        ...e
      }
    ),
    [d, t, e, c]
  );
  return /* @__PURE__ */ o("div", { className: "bg-gray-100 flex items-center justify-center size-full", children: i ? p(i) : /* @__PURE__ */ o("div", { className: "text-gray-400 text-sm w-full text-center", children: "No Image" }) });
}
function w({
  className: t,
  position: e = "bottom-left",
  variant: r,
  children: a,
  ...n
}) {
  const { badgeText: i, badgeVariant: d } = u(), c = a || i;
  return c ? /* @__PURE__ */ o(
    "div",
    {
      className: s(
        "absolute z-10",
        e === "top-left" ? "top-3 left-3" : "bottom-2 left-2"
      ),
      children: /* @__PURE__ */ o(
        S,
        {
          variant: r ?? d ?? "none",
          className: s(
            !d && !r && "bg-black/50 text-white border-transparent",
            "rounded",
            t
          ),
          ...n,
          children: c
        }
      )
    }
  ) : null;
}
function D({
  className: t,
  ...e
}) {
  const { isFavorited: r, isFavoriteButtonDisabled: a, onFavoriteToggle: n } = u();
  return a ? null : /* @__PURE__ */ o("div", { className: s("absolute bottom-3 right-3 z-10", t), ...e, children: /* @__PURE__ */ o(L, { onClick: n, filled: r }) });
}
function G({ className: t, ...e }) {
  const { variant: r } = u();
  return r !== "default" ? null : /* @__PURE__ */ o(
    "div",
    {
      "data-slot": "product-card-info",
      className: s("px-1 pt-2 pb-0 space-y-1", t),
      ...e
    }
  );
}
function H({
  className: t,
  children: e,
  ...r
}) {
  const { product: a } = u();
  return /* @__PURE__ */ o(
    "h3",
    {
      "data-slot": "product-card-title",
      className: s(
        "text-sm font-medium leading-tight text-gray-900",
        "truncate overflow-hidden whitespace-nowrap text-ellipsis",
        t
      ),
      ...r,
      children: e || a.title
    }
  );
}
function J({ className: t }) {
  const { product: e, selectedProductVariant: r } = u(), a = r?.price || e?.price, n = r?.compareAtPrice || e?.compareAtPrice;
  return /* @__PURE__ */ o(
    E,
    {
      amount: a?.amount || "",
      currencyCode: a?.currencyCode || "",
      compareAtPriceAmount: n?.amount,
      compareAtPriceCurrencyCode: n?.currencyCode,
      className: t
    }
  );
}
function K() {
  const { product: t, selectedProductVariant: e, variant: r } = u();
  if (r !== "priceOverlay") return null;
  const a = e?.price || t.price, n = a?.currencyCode, i = a?.amount;
  return !n || !i ? null : /* @__PURE__ */ o(w, { position: "top-left", children: j(i, n) });
}
function at({
  product: t,
  selectedProductVariant: e,
  variant: r = "default",
  touchable: a = !0,
  badgeText: n,
  badgeVariant: i,
  onProductClick: d,
  onFavoriteToggled: c,
  children: p,
  favoriteButtonDisabled: l = !1
}) {
  const { navigateToProduct: h } = B(), { saveProduct: g, unsaveProduct: P } = V(), [f, y] = A(t.isFavorited), x = C(() => {
    a && (d?.(), h({
      productId: t.id
    }));
  }, [h, t.id, a, d]), I = C(async () => {
    const m = f;
    y(!m), c?.(!m);
    try {
      m ? await P({
        productId: t.id,
        shopId: t.shop.id,
        productVariantId: e?.id || t.defaultVariantId
      }) : await g({
        productId: t.id,
        shopId: t.shop.id,
        productVariantId: e?.id || t.defaultVariantId
      });
    } catch {
      y(m), c?.(m);
    }
  }, [
    f,
    t.id,
    t.shop.id,
    t.defaultVariantId,
    e?.id,
    g,
    P,
    c
  ]), F = k(
    () => ({
      // Core data
      product: t,
      selectedProductVariant: e,
      // UI configuration
      variant: r,
      touchable: a,
      badgeText: n,
      badgeVariant: i,
      // State
      isFavorited: f,
      isFavoriteButtonDisabled: l,
      // Actions
      onClick: x,
      onFavoriteToggle: I
    }),
    [
      t,
      e,
      r,
      a,
      n,
      i,
      f,
      x,
      I,
      l
    ]
  );
  return /* @__PURE__ */ o(b.Provider, { value: F, children: p ?? /* @__PURE__ */ v(M, { children: [
    /* @__PURE__ */ v(R, { children: [
      /* @__PURE__ */ o(q, {}),
      r === "priceOverlay" && /* @__PURE__ */ o(K, {}),
      /* @__PURE__ */ o(w, {}),
      /* @__PURE__ */ o(D, {})
    ] }),
    r === "default" && /* @__PURE__ */ v(G, { children: [
      /* @__PURE__ */ o(H, {}),
      /* @__PURE__ */ o(J, {})
    ] })
  ] }) });
}
export {
  at as ProductCard,
  w as ProductCardBadge,
  M as ProductCardContainer,
  D as ProductCardFavoriteButton,
  q as ProductCardImage,
  R as ProductCardImageContainer,
  G as ProductCardInfo,
  J as ProductCardPrice,
  H as ProductCardTitle
};
//# sourceMappingURL=product-card.js.map
