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