var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/walletCard/index.tsx
var walletCard_exports = {};
__export(walletCard_exports, {
  default: () => walletCard_default
});
module.exports = __toCommonJS(walletCard_exports);
var import_antd = require("antd");
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_react_barcode = __toESM(require("react-barcode"));
var import_EyeOff = __toESM(require("@pisell/icon/es/EyeOff"));
var import_locales = require("../../locales/index");
var import_iconfont = __toESM(require("./../iconfont"));
var import_pisellModal = __toESM(require("./../pisellModal"));
var import_Amount = __toESM(require("./../pisellText/components/Amount"));
var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
var import_Guest = __toESM(require("./Guest"));
var import_Guide = __toESM(require("./Guide"));
var import_index = require("./index.less");
var DEFAULT_PROPS = {
  symbol: "$",
  mode: "light",
  iconImg: "",
  showIcon: true,
  showWalletName: true,
  shopName: "Store name",
  showShopName: true,
  cardNo: "WL0000000001",
  cardStyle: "normal",
  codeType: "barCode",
  platform: "pc",
  codeDirection: "bottom",
  showCardNo: true,
  showCode: true,
  walletName: "Level",
  isLogin: true,
  showHolderName: true,
  holder: null,
  onSetHolder: () => {
  },
  items: [
    {
      type: "rechargeable",
      display: 1,
      custom_title: {
        original: "Balance",
        "zh-CN": "充值卡",
        "zh-HK": "充值卡",
        en: "Balance",
        "ja": "残高",
        "pt": "Saldo"
      }
    },
    {
      type: "point",
      display: 1,
      custom_title: {
        original: "Points",
        "zh-CN": "积分卡",
        "zh-HK": "積分卡",
        en: "Points",
        "ja": "ポイント",
        "pt": "Pontos"
      }
    },
    {
      type: "voucher",
      display: 1,
      custom_title: {
        original: "Voucher",
        "zh-CN": "代金券",
        "zh-HK": "代金券",
        en: "Voucher",
        "ja": "クーポン",
        "pt": "Cupom"
      }
    },
    {
      type: "discount",
      display: 1,
      custom_title: {
        original: "Discount",
        "zh-CN": "折扣卡",
        "zh-HK": "折扣卡",
        "ja": "割引カード",
        "pt": "Cartão de desconto",
        en: "Discount"
      }
    }
  ]
};
var toBooleanValue = (value) => {
  if (value === void 0) return false;
  if (value === 0 || value === "0") return false;
  if (value === 1 || value === "1") return true;
  return !!value;
};
var useCodeModal = (cardNo, onCodeClick, codeType) => {
  var _a;
  const [isModalOpen, setIsModalOpen] = (0, import_react.useState)(false);
  const context = (0, import_useEngineContext.default)();
  const { interaction } = ((_a = context.appHelper) == null ? void 0 : _a.utils) || {};
  const handleCodeClick = (e) => {
    var _a2, _b, _c, _d;
    e.stopPropagation();
    if ((_b = (_a2 = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _a2.isAppEnv) == null ? void 0 : _b.call(_a2)) {
      const typeMap = {
        qrCode: "qrCode",
        barCode: "barCode"
      };
      (_d = (_c = interaction == null ? void 0 : interaction.utils) == null ? void 0 : _c.postMessageToApp) == null ? void 0 : _d.call(_c, {
        module: "global",
        key: "openCodeModal",
        data: {
          type: typeMap[codeType] || codeType,
          value: cardNo
        }
      });
      return;
    }
    if (onCodeClick) {
      onCodeClick();
    } else {
      setIsModalOpen(true);
    }
  };
  const closeModal = (e) => {
    e == null ? void 0 : e.stopPropagation();
    setIsModalOpen(false);
  };
  return {
    isModalOpen,
    handleCodeClick,
    closeModal
  };
};
var CardHeader = ({
  showIcon = true,
  showWalletName = true,
  showShopName = true,
  showCardNo = true,
  showCode = true,
  iconImg,
  mode,
  walletName = "Level",
  shopName = "Store name",
  cardNo = "Wallet number",
  cardStyle = "normal",
  codeType = "barCode",
  onCodeClick,
  isLogin = false,
  showViewPin = false,
  onViewPinClick,
  showHolderName,
  holderName
}) => {
  const processedShowIcon = toBooleanValue(showIcon);
  const processedShowWalletName = toBooleanValue(showWalletName);
  const processedShowShopName = toBooleanValue(showShopName);
  const processedShowCardNo = toBooleanValue(showCardNo);
  const processedShowCode = toBooleanValue(showCode);
  const processedShowViewPin = toBooleanValue(showViewPin);
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header-left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header-level" }, processedShowIcon && iconImg ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header-icon" }, /* @__PURE__ */ import_react.default.createElement(
    "img",
    {
      src: iconImg,
      alt: "wallet icon",
      style: { width: "20px", height: "20px" }
    }
  )) : null, processedShowWalletName && walletName && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header-level-text" }, walletName)), showHolderName && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-wallet-card-header-holder-name") }, holderName), processedShowShopName && shopName && /* @__PURE__ */ import_react.default.createElement("div", null, shopName), processedShowCardNo && cardNo && /* @__PURE__ */ import_react.default.createElement("div", null, cardNo), processedShowViewPin && /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "pisell-wallet-card-header-view-pin",
      onClick: onViewPinClick
    },
    (0, import_locales.getText)("walletCard-viewPin"),
    /* @__PURE__ */ import_react.default.createElement(import_EyeOff.default, { className: "pisell-wallet-card-header-view-pin-icon" })
  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header-right" }, processedShowCode && cardStyle === "normal" && /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "pisell-wallet-card-icon-wrapper",
      onClick: onCodeClick
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_iconfont.default,
      {
        style: {
          color: mode === "dark" ? "#fff" : "#101828"
        },
        type: codeType === "barCode" ? "pisell2-Barcode" : "pisell2-a-qr-code-02",
        className: "pisell-wallet-card-icon"
      }
    )
  )));
};
var CardItem = ({ item, symbol }) => {
  var _a;
  const { type, custom_title, value } = item;
  const context = (0, import_useEngineContext.default)();
  const utils = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils;
  const translationOriginal = (utils == null ? void 0 : utils.translationOriginal) || (utils == null ? void 0 : utils.translation);
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item-label" }, translationOriginal(custom_title || "") || ""), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item-value" }, type === "rechargeable" ? /* @__PURE__ */ import_react.default.createElement(
    import_Amount.default,
    {
      className: "pisell-card-amount-item-value",
      platform: "h5",
      symbol,
      useThousandsSeparator: true,
      showCurrencySymbol: true,
      value
    }
  ) : value || "0"));
};
var CardContent = ({ items, symbol }) => {
  const filteredItems = (items || []).filter((item) => item.display !== 0);
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "pisell-wallet-card-list",
      style: {
        justifyContent: filteredItems.length > 1 ? "space-between" : "flex-start"
      }
    },
    filteredItems.map((item, index) => /* @__PURE__ */ import_react.default.createElement(CardItem, { key: index, item, symbol }))
  );
};
var CodeDisplay = ({ codeType, cardNo }) => {
  if (!cardNo) return null;
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-code" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-code-qrcode" }, codeType === "barCode" ? /* @__PURE__ */ import_react.default.createElement(import_react_barcode.default, { value: cardNo, displayValue: false, height: 114, width: 3 }) : /* @__PURE__ */ import_react.default.createElement(import_antd.QRCode, { size: 250, value: cardNo, bordered: false }), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-code-qrcode-value" }, cardNo)));
};
var blockEvent = (e) => {
  e.stopPropagation();
  e.preventDefault();
  if (e.nativeEvent) {
    e.nativeEvent.stopImmediatePropagation();
    e.nativeEvent.preventDefault();
  }
  return false;
};
var CodeModal = ({ isOpen, onClose, codeType, cardNo, platform }) => {
  return /* @__PURE__ */ import_react.default.createElement(
    import_pisellModal.default,
    {
      title: (0, import_locales.getText)(
        codeType === "barCode" ? "walletCard-barcode" : "walletCard-qrcode"
      ),
      platform,
      onCancel: onClose,
      open: isOpen,
      footer: null,
      mobileModalHeight: "auto",
      className: "pisell-qrcode-modal",
      bodyStyle: { padding: 0 }
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "pisell-qrcode-modal-content",
        onClick: blockEvent,
        onTouchStart: blockEvent,
        onTouchMove: blockEvent,
        onTouchEnd: blockEvent,
        onTouchCancel: blockEvent,
        onMouseDown: blockEvent,
        onMouseMove: blockEvent,
        onMouseUp: blockEvent,
        onWheel: blockEvent,
        onScroll: blockEvent,
        onDragStart: blockEvent,
        onDrag: blockEvent,
        onDragEnd: blockEvent
      },
      /* @__PURE__ */ import_react.default.createElement(CodeDisplay, { codeType, cardNo })
    )
  );
};
var WalletCard = (props) => {
  var _a;
  const mergedProps = { ...DEFAULT_PROPS, ...props };
  const {
    symbol,
    mode,
    iconImg,
    shopName,
    cardNo,
    cardStyle,
    codeType,
    platform,
    codeDirection,
    walletName,
    items = [],
    onCodeClick,
    onClick,
    className,
    style,
    isGuide,
    showHolderName,
    holder,
    onSetHolder
  } = mergedProps;
  const showIcon = toBooleanValue(mergedProps.showIcon);
  const showWalletName = toBooleanValue(mergedProps.showWalletName);
  const showShopName = toBooleanValue(mergedProps.showShopName);
  const showCardNo = toBooleanValue(mergedProps.showCardNo);
  const showCode = toBooleanValue(mergedProps.showCode);
  const isLogin = toBooleanValue(mergedProps.isLogin);
  const showViewPin = toBooleanValue(mergedProps == null ? void 0 : mergedProps.showViewPin);
  const context = (0, import_useEngineContext.default)();
  const { utils } = context.appHelper || {};
  const { isModalOpen, handleCodeClick, closeModal } = useCodeModal(
    cardNo,
    onCodeClick,
    codeType
  );
  console.log("showViewPin", props);
  const backgroundStyle = (0, import_react.useMemo)(() => {
    var _a2;
    if (props.customBackgroundImage) {
      return { backgroundImage: `url(${props.customBackgroundImage})` };
    } else {
      if (((_a2 = props == null ? void 0 : props.walletGuideConfig) == null ? void 0 : _a2.backgroundColor) && isGuide || (props == null ? void 0 : props.backgroundColor) && !isLogin) {
        return {
          backgroundImage: "none"
        };
      }
      return {
        backgroundImage: `url(https://file.mypisell-dev.com/pisel/image/9/${mode === "dark" ? "3d039c83ff5b84fadafb8a23c33d6cc42025_02_26_00_42_53_288_08413160975__720_456__" : "61dcbe950c9451164a6bb1d17d5bc5f02025_02_26_00_43_42_741_04853453608__720_456__"}.png)`
      };
    }
  }, [
    props.customBackgroundImage,
    mode,
    (_a = props == null ? void 0 : props.walletGuideConfig) == null ? void 0 : _a.backgroundColor,
    props == null ? void 0 : props.backgroundColor,
    isLogin,
    isGuide
  ]);
  const goWallet = () => {
    if (!(items == null ? void 0 : items.length)) {
      return;
    }
    const data = {
      id: props.id,
      holder_id: holder == null ? void 0 : holder.holder_id
    };
    utils == null ? void 0 : utils.action({
      type: "pisell1.goWallet",
      data,
      callback: () => {
      }
    });
  };
  const onViewPinClick = (e) => {
    e.stopPropagation();
    if (props == null ? void 0 : props.onViewPinClick) {
      props.onViewPinClick();
    } else {
      console.error("onViewPinClick方法需要传入");
    }
  };
  const _renderMask = () => {
    if (typeof onSetHolder !== "function") return null;
    if ((holder == null ? void 0 : holder.holder_type) === "form" && !(holder == null ? void 0 : holder.holder_id)) {
      return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-add-holder-mask" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-add-holder-mask-text" }, (0, import_locales.getText)("pisell2.wallet-card.add-holder-tip")), /* @__PURE__ */ import_react.default.createElement(
        import_antd.Button,
        {
          type: "primary",
          className: "pisell-wallet-add-holder-mask-button",
          onClick: () => onSetHolder == null ? void 0 : onSetHolder()
        },
        (0, import_locales.getText)("pisell2.wallet-card.add-holder-button-text"),
        /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-user-edit", style: { fontSize: 16 } })
      ));
    }
    return null;
  };
  const _showHolderName = (0, import_react.useMemo)(() => {
    return (holder == null ? void 0 : holder.holder_type) === "form" && showHolderName;
  }, [holder, showHolderName]);
  const holderName = (0, import_react.useMemo)(() => {
    var _a2;
    if ((holder == null ? void 0 : holder.holder_type) === "form" && !(holder == null ? void 0 : holder.holder_id)) {
      return "--";
    }
    return ((_a2 = holder == null ? void 0 : holder.detail) == null ? void 0 : _a2.main_field) || "";
  }, [holder]);
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)("pisell-wallet-card-wrapper", className),
      style,
      onClick
    },
    /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { style: { border: "none" }, bodyStyle: { padding: 0 } }, /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "pisell-wallet-card-container",
        style: {
          flexDirection: codeDirection === "top" ? "column-reverse" : "column"
        }
      },
      _renderMask(),
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: (0, import_classnames.default)(
            "pisell-wallet-card-content",
            mode,
            (!isLogin || isGuide) && "pisell-wallet-card-guest-content"
          ),
          style: backgroundStyle
        },
        isLogin ? !isGuide ? /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            onClick: () => {
              goWallet();
            }
          },
          /* @__PURE__ */ import_react.default.createElement(
            CardHeader,
            {
              mode,
              showWalletName,
              showIcon,
              iconImg,
              walletName,
              shopName,
              showShopName,
              cardNo,
              showCardNo,
              showCode,
              cardStyle,
              codeType,
              onCodeClick: handleCodeClick,
              isLogin,
              showViewPin,
              onViewPinClick,
              showHolderName: _showHolderName,
              holderName
            }
          ),
          /* @__PURE__ */ import_react.default.createElement(
            CardContent,
            {
              items,
              symbol
            }
          )
        ) : /* @__PURE__ */ import_react.default.createElement(import_Guide.default, { setting: props }) : /* @__PURE__ */ import_react.default.createElement(import_Guest.default, { setting: props })
      ),
      cardStyle === "full" && isLogin && /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: (0, import_classnames.default)(
            "pisell-wallet-card-showCode",
            codeDirection === "top" ? "code-top" : "code-bottom"
          )
        },
        /* @__PURE__ */ import_react.default.createElement(CodeDisplay, { codeType, cardNo })
      )
    )),
    /* @__PURE__ */ import_react.default.createElement(
      CodeModal,
      {
        isOpen: isModalOpen,
        onClose: closeModal,
        codeType,
        cardNo,
        platform
      }
    )
  );
};
var walletCard_default = WalletCard;
