import { jsx as o, jsxs as C } from "react/jsx-runtime";
import * as F from "react";
import { useState as N, useEffect as A, useCallback as g, useMemo as k, useContext as V } from "react";
import { useShopNavigation as j } from "../../hooks/navigation/useShopNavigation.js";
import { useSavedProductsActions as z } from "../../hooks/user/useSavedProductsActions.js";
import { formatMoney as B } from "../../lib/formatMoney.js";
import { cn as s } from "../../lib/utils.js";
import { Image as E } from "../atoms/image.js";
import { ProductVariantPrice as T } 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 I = F.createContext(void 0);
function u() {
  const t = V(I);
  if (!t)
    throw new Error(
      "ProductCard components must be used within a ProductCard provider"
    );
  return t;
}
function M({
  className: t,
  ...r
}) {
  const { touchable: e, onClick: a } = u(), n = /* @__PURE__ */ o(
    "div",
    {
      className: s(
        "relative w-full overflow-hidden rounded-xl border-0",
        t
      ),
      ...r
    }
  );
  return e && 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,
  ...r
}) {
  const { variant: e } = 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",
        e === "compact" ? "min-h-[104px]" : "min-h-[134px]",
        t
      ),
      ...r
    }
  );
}
function q({ className: t, ...r }) {
  const { product: e, selectedProductVariant: a } = u(), n = a?.image || e.featuredImage, i = n?.url, d = n?.altText || e.title, c = e.featuredImage?.thumbhash, p = g(
    (l) => c ? /* @__PURE__ */ o(
      E,
      {
        "data-slot": "product-card-image",
        src: l,
        alt: d,
        aspectRatio: 1,
        thumbhash: c,
        className: s("size-full object-cover", t),
        ...r
      }
    ) : /* @__PURE__ */ o(
      "img",
      {
        "data-slot": "product-card-image",
        src: l,
        alt: d,
        className: s("size-full", t),
        ...r
      }
    ),
    [d, t, r, 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: r = "bottom-left",
  variant: e,
  children: a,
  ...n
}) {
  const { badgeText: i, badgeVariant: d } = u(), c = a || i;
  return c ? /* @__PURE__ */ o(
    "div",
    {
      className: s(
        "absolute z-10",
        r === "top-left" ? "top-3 left-3" : "bottom-2 left-2"
      ),
      children: /* @__PURE__ */ o(
        S,
        {
          variant: e ?? d ?? "none",
          className: s(
            !d && !e && "bg-black/50 text-white border-transparent",
            "rounded",
            t
          ),
          ...n,
          children: c
        }
      )
    }
  ) : null;
}
function D({
  className: t,
  ...r
}) {
  const { isFavorited: e, onFavoriteToggle: a } = u();
  return console.log("isFavorited", e), /* @__PURE__ */ o("div", { className: s("absolute bottom-3 right-3 z-10", t), ...r, children: /* @__PURE__ */ o(L, { onClick: a, filled: e }) });
}
function G({ className: t, ...r }) {
  const { variant: e } = u();
  return e !== "default" ? null : /* @__PURE__ */ o(
    "div",
    {
      "data-slot": "product-card-info",
      className: s("px-1 pt-2 pb-0 space-y-1", t),
      ...r
    }
  );
}
function H({
  className: t,
  children: r,
  ...e
}) {
  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
      ),
      ...e,
      children: r || a.title
    }
  );
}
function J({ className: t }) {
  const { product: r, selectedProductVariant: e } = u(), a = e?.price || r?.price, n = e?.compareAtPrice || r?.compareAtPrice;
  return /* @__PURE__ */ o(
    T,
    {
      amount: a?.amount || "",
      currencyCode: a?.currencyCode || "",
      compareAtPriceAmount: n?.amount,
      compareAtPriceCurrencyCode: n?.currencyCode,
      className: t
    }
  );
}
function K() {
  const { product: t, selectedProductVariant: r, variant: e } = u();
  if (e !== "priceOverlay") return null;
  const a = r?.price || t.price, n = a?.currencyCode, i = a?.amount;
  return !n || !i ? null : /* @__PURE__ */ o(b, { position: "top-left", children: B(i, n) });
}
function at({
  product: t,
  selectedProductVariant: r,
  variant: e = "default",
  touchable: a = !0,
  badgeText: n,
  badgeVariant: i,
  onProductClick: d,
  onFavoriteToggled: c,
  children: p
}) {
  const { navigateToProduct: l } = j(), { saveProduct: h, unsaveProduct: P } = z(), [f, v] = N(t.isFavorited);
  A(() => {
    v(t.isFavorited);
  }, [t.isFavorited]);
  const y = g(() => {
    a && (d?.(), l({
      productId: t.id
    }));
  }, [l, t.id, a, d]), x = g(async () => {
    const m = f;
    v(!m), c?.(!m);
    try {
      m ? await P({
        productId: t.id,
        shopId: t.shop.id,
        productVariantId: r?.id || t.defaultVariantId
      }) : await h({
        productId: t.id,
        shopId: t.shop.id,
        productVariantId: r?.id || t.defaultVariantId
      });
    } catch {
      v(m), c?.(m);
    }
  }, [
    f,
    t.id,
    t.shop.id,
    t.defaultVariantId,
    r?.id,
    h,
    P,
    c
  ]), w = k(
    () => ({
      // Core data
      product: t,
      selectedProductVariant: r,
      // UI configuration
      variant: e,
      touchable: a,
      badgeText: n,
      badgeVariant: i,
      // State
      isFavorited: f,
      // Actions
      onClick: y,
      onFavoriteToggle: x
    }),
    [
      t,
      r,
      e,
      a,
      n,
      i,
      f,
      y,
      x
    ]
  );
  return /* @__PURE__ */ o(I.Provider, { value: w, children: p ?? /* @__PURE__ */ C(M, { children: [
    /* @__PURE__ */ C(R, { children: [
      /* @__PURE__ */ o(q, {}),
      e === "priceOverlay" && /* @__PURE__ */ o(K, {}),
      /* @__PURE__ */ o(b, {}),
      /* @__PURE__ */ o(D, {})
    ] }),
    e === "default" && /* @__PURE__ */ C(G, { children: [
      /* @__PURE__ */ o(H, {}),
      /* @__PURE__ */ o(J, {})
    ] })
  ] }) });
}
export {
  at as ProductCard,
  b 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
