"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = CrossSellCard;
var _jsxRuntime = require("react/jsx-runtime");
var _AddShoppingCart = _interopRequireDefault(require("@mui/icons-material/AddShoppingCart"));
var _ShoppingCartCheckout = _interopRequireDefault(require("@mui/icons-material/ShoppingCartCheckout"));
var _material = require("@mui/material");
var _context = require("@arcblock/ux/lib/Locale/context");
var _format = require("../../utils/format");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function CrossSellCard({
  crossSellItem,
  currency,
  exchangeRate,
  crossSellRequired,
  onAdd
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  if (!crossSellItem) return null;
  const {
    product
  } = crossSellItem;
  const productImage = product?.images?.[0] || "";
  const productName = product?.name || t("payment.checkout.cross_sell.add");
  const {
    recurring
  } = crossSellItem;
  const intervalKey = recurring?.interval ? _format.INTERVAL_LOCALE_KEY[recurring.interval] : null;
  const rawDescription = product?.description || "";
  const subtitle = (() => {
    if (rawDescription && rawDescription !== productName) return rawDescription;
    return intervalKey ? t(intervalKey) : "";
  })();
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      position: "relative"
    },
    children: [crossSellRequired && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
      label: (0, _format.tSafe)(t, "payment.checkout.cross_sell.recommended", "RECOMMENDED"),
      size: "small",
      sx: {
        position: "absolute",
        top: 0,
        right: 40,
        transform: "translateY(-50%)",
        zIndex: 1,
        height: 22,
        fontSize: 9,
        fontWeight: 900,
        letterSpacing: "0.12em",
        bgcolor: "primary.main",
        color: theme => (0, _format.primaryContrastColor)(theme),
        boxShadow: "0 4px 12px rgba(45,124,243,0.2)",
        "& .MuiChip-label": {
          px: 1.5
        }
      }
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
      sx: {
        p: {
          xs: 2,
          md: 3
        },
        bgcolor: "background.paper",
        borderRadius: {
          xs: "16px",
          md: "24px"
        },
        border: "2px dashed",
        borderColor: theme => theme.palette.mode === "dark" ? "rgba(255,255,255,0.15)" : "rgba(45,124,243,0.25)",
        boxShadow: theme => theme.palette.mode === "dark" ? "0 12px 40px -8px rgba(0,0,0,0.3)" : "0 12px 40px -8px rgba(0,0,0,0.06)",
        transition: "all 0.3s ease",
        cursor: "pointer",
        "&:hover": {
          borderColor: "primary.main",
          boxShadow: "0 12px 40px -8px rgba(0,0,0,0.1)"
        }
      },
      onClick: onAdd,
      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: "row",
        spacing: {
          xs: 1.5,
          md: 2.5
        },
        sx: {
          alignItems: "center",
          width: "100%"
        },
        children: [productImage ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
          src: productImage,
          variant: "rounded",
          sx: {
            width: {
              xs: 44,
              md: 64
            },
            height: {
              xs: 44,
              md: 64
            },
            borderRadius: {
              xs: "12px",
              md: "16px"
            },
            flexShrink: 0
          }
        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
          variant: "rounded",
          sx: {
            width: {
              xs: 44,
              md: 64
            },
            height: {
              xs: 44,
              md: 64
            },
            borderRadius: {
              xs: "12px",
              md: "16px"
            },
            bgcolor: theme => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "#eff6ff",
            flexShrink: 0
          },
          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ShoppingCartCheckout.default, {
            sx: {
              fontSize: {
                xs: 22,
                md: 28
              },
              color: "primary.main",
              opacity: 0.45
            }
          })
        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
          sx: {
            flex: 1,
            minWidth: 0
          },
          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
            direction: "row",
            justifyContent: "space-between",
            alignItems: "flex-start",
            sx: {
              mb: 0.25
            },
            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              sx: {
                fontWeight: 800,
                fontSize: {
                  xs: 15,
                  md: 18
                },
                color: "text.primary",
                lineHeight: 1.3
              },
              children: productName
            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
              alignItems: "flex-end",
              sx: {
                flexShrink: 0,
                ml: {
                  xs: 1,
                  md: 2
                }
              },
              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                sx: {
                  fontWeight: 800,
                  color: "text.primary",
                  whiteSpace: "nowrap",
                  fontSize: {
                    xs: 15,
                    md: 18
                  }
                },
                children: [(0, _format.formatDynamicUnitPrice)(crossSellItem, currency, exchangeRate), " ", currency?.symbol]
              }), exchangeRate && crossSellItem.base_amount && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                sx: {
                  fontSize: 10,
                  color: "text.disabled",
                  fontWeight: 700,
                  lineHeight: 1
                },
                children: ["\u2248 $", Number(crossSellItem.base_amount || 0).toFixed(2)]
              })]
            })]
          }), subtitle && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
            sx: {
              fontSize: {
                xs: 12,
                md: 14
              },
              color: "text.secondary",
              fontWeight: 500,
              lineHeight: 1.4
            },
            noWrap: true,
            children: subtitle
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
            sx: {
              pt: {
                xs: 1.5,
                md: 2
              }
            },
            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
              size: "small",
              variant: "outlined",
              startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_AddShoppingCart.default, {
                sx: {
                  fontSize: "14px !important"
                }
              }),
              sx: {
                textTransform: "none",
                fontSize: {
                  xs: 11,
                  md: 12
                },
                fontWeight: 700,
                borderRadius: "8px",
                border: "1px solid",
                borderColor: "divider",
                color: "primary.main",
                bgcolor: "background.paper",
                boxShadow: 1,
                px: 1.5,
                py: 0.5,
                transition: "all 0.2s",
                "&:hover": {
                  bgcolor: "primary.main",
                  color: theme => (0, _format.primaryContrastColor)(theme),
                  borderColor: "primary.main"
                },
                "&:active": {
                  transform: "scale(0.95)"
                }
              },
              onClick: e => {
                e.stopPropagation();
                onAdd();
              },
              children: (0, _format.tSafe)(t, "payment.checkout.cross_sell.addToOrder", "Add to order")
            })
          })]
        })]
      })
    })]
  });
}