function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { Card, QRCode } from 'antd';
import classNames from 'classnames';
import React, { useMemo, useState } from 'react';
import Barcode from 'react-barcode';
import EyeOff from '@pisell/icon/es/EyeOff';
import { getText } from "../../locales/index";
import Iconfont from "./../iconfont";
import PisellModal from "./../pisellModal";
import Amount from "./../pisellText/components/Amount";
import useEngineContext from "../../hooks/useEngineContext";
import Guest from "./Guest";
import Guide from "./Guide";
import "./index.less";

// 添加JSX类型声明

// 类型定义

// 默认值
var DEFAULT_PROPS = {
  symbol: '$',
  mode: 'light',
  iconImg: '',
  showIcon: true,
  showWalletName: true,
  shopName: 'Store name',
  showShopName: true,
  cardNo: 'Wallet number',
  cardStyle: 'normal',
  codeType: 'barCode',
  platform: 'pc',
  codeDirection: 'bottom',
  showCardNo: true,
  showCode: true,
  walletName: 'Level',
  isLogin: true,
  items: [{
    key: 'rechargeable',
    label: 'rechargeable',
    value: 0
  }, {
    key: 'piont',
    label: 'piont',
    value: 10
  }, {
    key: 'voucher',
    label: 'Discount cardvoucher',
    value: 0
  }, {
    key: 'discount',
    label: 'discount',
    value: 0
  }]
};

// 工具函数：将可能的数字0/1转为布尔值
var toBooleanValue = function toBooleanValue(value) {
  if (value === undefined) return false;
  if (value === 0 || value === '0') return false;
  if (value === 1 || value === '1') return true;
  return !!value;
};

// 自定义钩子：处理二维码/条形码模态框
var useCodeModal = function useCodeModal(cardNo, onCodeClick, codeType) {
  var _context$appHelper;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isModalOpen = _useState2[0],
    setIsModalOpen = _useState2[1];
  var context = useEngineContext();
  var _ref = ((_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {},
    interaction = _ref.interaction;
  var handleCodeClick = function handleCodeClick(e) {
    var _interaction$utils, _interaction$utils$is;
    e.stopPropagation();
    if (interaction !== null && interaction !== void 0 && (_interaction$utils = interaction.utils) !== null && _interaction$utils !== void 0 && (_interaction$utils$is = _interaction$utils.isAppEnv) !== null && _interaction$utils$is !== void 0 && _interaction$utils$is.call(_interaction$utils)) {
      var _interaction$utils2, _interaction$utils2$p;
      var typeMap = {
        orCode: 'qrCode',
        barCode: 'barCode'
      };
      interaction === null || interaction === void 0 || (_interaction$utils2 = interaction.utils) === null || _interaction$utils2 === void 0 || (_interaction$utils2$p = _interaction$utils2.postMessageToApp) === null || _interaction$utils2$p === void 0 || _interaction$utils2$p.call(_interaction$utils2, {
        module: 'global',
        key: 'openCodeModal',
        data: {
          type: typeMap[codeType] || codeType,
          value: cardNo
        }
      });
      return;
    }
    if (onCodeClick) {
      onCodeClick();
    } else {
      setIsModalOpen(true);
    }
  };
  var closeModal = function closeModal(e) {
    e === null || e === void 0 || e.stopPropagation();
    setIsModalOpen(false);
  };
  return {
    isModalOpen: isModalOpen,
    handleCodeClick: handleCodeClick,
    closeModal: closeModal
  };
};

// 子组件：卡片头部
var CardHeader = function CardHeader(_ref2) {
  var _ref2$showIcon = _ref2.showIcon,
    showIcon = _ref2$showIcon === void 0 ? true : _ref2$showIcon,
    _ref2$showWalletName = _ref2.showWalletName,
    showWalletName = _ref2$showWalletName === void 0 ? true : _ref2$showWalletName,
    _ref2$showShopName = _ref2.showShopName,
    showShopName = _ref2$showShopName === void 0 ? true : _ref2$showShopName,
    _ref2$showCardNo = _ref2.showCardNo,
    showCardNo = _ref2$showCardNo === void 0 ? true : _ref2$showCardNo,
    _ref2$showCode = _ref2.showCode,
    showCode = _ref2$showCode === void 0 ? true : _ref2$showCode,
    iconImg = _ref2.iconImg,
    mode = _ref2.mode,
    _ref2$walletName = _ref2.walletName,
    walletName = _ref2$walletName === void 0 ? 'Level' : _ref2$walletName,
    _ref2$shopName = _ref2.shopName,
    shopName = _ref2$shopName === void 0 ? 'Store name' : _ref2$shopName,
    _ref2$cardNo = _ref2.cardNo,
    cardNo = _ref2$cardNo === void 0 ? 'Wallet number' : _ref2$cardNo,
    _ref2$cardStyle = _ref2.cardStyle,
    cardStyle = _ref2$cardStyle === void 0 ? 'normal' : _ref2$cardStyle,
    _ref2$codeType = _ref2.codeType,
    codeType = _ref2$codeType === void 0 ? 'barCode' : _ref2$codeType,
    onCodeClick = _ref2.onCodeClick,
    _ref2$isLogin = _ref2.isLogin,
    isLogin = _ref2$isLogin === void 0 ? false : _ref2$isLogin,
    _ref2$showViewPin = _ref2.showViewPin,
    showViewPin = _ref2$showViewPin === void 0 ? false : _ref2$showViewPin,
    onViewPinClick = _ref2.onViewPinClick;
  // 处理可能为0/1的布尔值
  var processedShowIcon = toBooleanValue(showIcon);
  var processedShowWalletName = toBooleanValue(showWalletName);
  var processedShowShopName = toBooleanValue(showShopName);
  var processedShowCardNo = toBooleanValue(showCardNo);
  var processedShowCode = toBooleanValue(showCode);
  var processedShowViewPin = toBooleanValue(showViewPin);
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-header-left"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-header-level"
  }, processedShowIcon && iconImg ? /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-header-icon"
  }, /*#__PURE__*/React.createElement("img", {
    src: iconImg,
    alt: "wallet icon",
    style: {
      width: '20px',
      height: '20px'
    }
  })) : null, processedShowWalletName && walletName && /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-header-level-text"
  }, walletName)), processedShowShopName && shopName && /*#__PURE__*/React.createElement("div", null, shopName), processedShowCardNo && cardNo && /*#__PURE__*/React.createElement("div", null, cardNo), processedShowViewPin && /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-header-view-pin",
    onClick: onViewPinClick
  }, getText('walletCard-viewPin'), /*#__PURE__*/React.createElement(EyeOff, {
    className: "pisell-wallet-card-header-view-pin-icon"
  }))), /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-header-right"
  }, processedShowCode && cardStyle === 'normal' && /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-icon-wrapper",
    onClick: onCodeClick
  }, /*#__PURE__*/React.createElement(Iconfont, {
    style: {
      color: mode === 'dark' ? '#fff' : '#101828'
    },
    type: codeType === 'barCode' ? 'pisell2-Barcode' : 'pisell2-a-qr-code-02',
    className: "pisell-wallet-card-icon"
  }))));
};

// 子组件：卡片内容项
var CardItem = function CardItem(_ref3) {
  var item = _ref3.item,
    symbol = _ref3.symbol;
  var key = item.key,
    label = item.label,
    value = item.value;
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-item-label"
  }, getText("walletCard-".concat(label)) || ''), /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-item-value"
  }, key === 'rechargeable' ? /*#__PURE__*/React.createElement(Amount, {
    className: "pisell-card-amount-item-value",
    platform: "h5",
    symbol: symbol,
    useThousandsSeparator: true,
    showCurrencySymbol: true,
    value: value
  }) : value));
};

// 子组件：卡片内容
var CardContent = function CardContent(_ref4) {
  var items = _ref4.items,
    symbol = _ref4.symbol;
  // 定义期望的顺序
  var expectedOrder = ['piont', 'balance', 'discount', 'voucher'];

  // 对 items 进行排序
  var sortedItems = useMemo(function () {
    if (!(items !== null && items !== void 0 && items.length)) return [];
    return _toConsumableArray(items).sort(function (a, b) {
      var indexA = expectedOrder.indexOf(a.key);
      var indexB = expectedOrder.indexOf(b.key);
      return indexA - indexB;
    });
  }, [items]);
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-list",
    style: {
      justifyContent: (sortedItems || []).length > 1 ? 'space-between' : 'flex-start'
    }
  }, (sortedItems || []).map(function (item, index) {
    return /*#__PURE__*/React.createElement(CardItem, {
      key: index,
      item: item,
      symbol: symbol
    });
  }));
};

// 子组件：二维码/条形码显示
var CodeDisplay = function CodeDisplay(_ref5) {
  var codeType = _ref5.codeType,
    cardNo = _ref5.cardNo;
  if (!cardNo) return null;
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-code"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-code-qrcode"
  }, codeType === 'barCode' ? /*#__PURE__*/React.createElement(Barcode, {
    value: cardNo,
    displayValue: false,
    height: 114,
    width: 3
  }) : /*#__PURE__*/React.createElement(QRCode, {
    size: 250,
    value: cardNo,
    bordered: false
  }), /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-code-qrcode-value"
  }, cardNo)));
};
var blockEvent = function blockEvent(e) {
  e.stopPropagation();
  e.preventDefault();
  if (e.nativeEvent) {
    e.nativeEvent.stopImmediatePropagation();
    e.nativeEvent.preventDefault();
  }
  return false;
};

// 子组件：二维码/条形码模态框
var CodeModal = function CodeModal(_ref6) {
  var isOpen = _ref6.isOpen,
    onClose = _ref6.onClose,
    codeType = _ref6.codeType,
    cardNo = _ref6.cardNo,
    platform = _ref6.platform;
  return /*#__PURE__*/React.createElement(PisellModal, {
    title: getText(codeType === 'barCode' ? 'walletCard-barcode' : 'walletCard-qrcode'),
    platform: platform,
    onCancel: onClose,
    open: isOpen,
    footer: null,
    mobileModalHeight: "auto",
    className: "pisell-qrcode-modal",
    bodyStyle: {
      padding: 0
    }
  }, /*#__PURE__*/React.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__*/React.createElement(CodeDisplay, {
    codeType: codeType,
    cardNo: cardNo
  })));
};

// 主组件
var WalletCard = function WalletCard(props) {
  var _props$walletGuideCon2;
  var mergedProps = _objectSpread(_objectSpread({}, DEFAULT_PROPS), props);
  var symbol = mergedProps.symbol,
    mode = mergedProps.mode,
    iconImg = mergedProps.iconImg,
    shopName = mergedProps.shopName,
    cardNo = mergedProps.cardNo,
    cardStyle = mergedProps.cardStyle,
    codeType = mergedProps.codeType,
    platform = mergedProps.platform,
    codeDirection = mergedProps.codeDirection,
    walletName = mergedProps.walletName,
    _mergedProps$items = mergedProps.items,
    items = _mergedProps$items === void 0 ? [] : _mergedProps$items,
    onCodeClick = mergedProps.onCodeClick,
    onClick = mergedProps.onClick,
    className = mergedProps.className,
    style = mergedProps.style,
    isGuide = mergedProps.isGuide;

  // 处理可能为0/1的布尔值props
  var showIcon = toBooleanValue(mergedProps.showIcon);
  var showWalletName = toBooleanValue(mergedProps.showWalletName);
  var showShopName = toBooleanValue(mergedProps.showShopName);
  var showCardNo = toBooleanValue(mergedProps.showCardNo);
  var showCode = toBooleanValue(mergedProps.showCode);
  var isLogin = toBooleanValue(mergedProps.isLogin);
  var showViewPin = toBooleanValue(mergedProps === null || mergedProps === void 0 ? void 0 : mergedProps.showViewPin);
  var context = useEngineContext();
  var _ref7 = context.appHelper || {},
    utils = _ref7.utils;
  // 使用自定义钩子处理模态框逻辑
  var _useCodeModal = useCodeModal(cardNo, onCodeClick, codeType),
    isModalOpen = _useCodeModal.isModalOpen,
    handleCodeClick = _useCodeModal.handleCodeClick,
    closeModal = _useCodeModal.closeModal;
  console.log('showViewPin', props);

  // 计算背景样式
  var backgroundStyle = useMemo(function () {
    if (props.customBackgroundImage) {
      return {
        backgroundImage: "url(".concat(props.customBackgroundImage, ")")
      };
    } else {
      var _props$walletGuideCon;
      // 如果游客和引导页设置了背景色，则不展示背景图
      if (props !== null && props !== void 0 && (_props$walletGuideCon = props.walletGuideConfig) !== null && _props$walletGuideCon !== void 0 && _props$walletGuideCon.backgroundColor && isGuide || props !== null && props !== void 0 && props.backgroundColor && !isLogin) {
        return {
          backgroundImage: 'none'
        };
      }
      return {
        backgroundImage: "url(https://file.mypisell-dev.com/pisel/image/9/".concat(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, props === null || props === void 0 || (_props$walletGuideCon2 = props.walletGuideConfig) === null || _props$walletGuideCon2 === void 0 ? void 0 : _props$walletGuideCon2.backgroundColor, props === null || props === void 0 ? void 0 : props.backgroundColor, isLogin, isGuide]);
  var goWallet = function goWallet() {
    // 未开启任何一个wallet pass展示，则不跳转
    if (!(items !== null && items !== void 0 && items.length)) {
      return;
    }
    utils === null || utils === void 0 || utils.action({
      type: 'pisell1.goWallet',
      data: {},
      callback: function callback() {}
    });
  };

  /**
   * 查看PIN的回调
   */
  var onViewPinClick = function onViewPinClick(e) {
    e.stopPropagation();
    if (props !== null && props !== void 0 && props.onViewPinClick) {
      props.onViewPinClick();
    } else {
      console.error('onViewPinClick方法需要传入');
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('pisell-wallet-card-wrapper', className),
    style: style,
    onClick: onClick
  }, /*#__PURE__*/React.createElement(Card, {
    style: {
      border: 'none'
    },
    bodyStyle: {
      padding: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-wallet-card-container",
    style: {
      flexDirection: codeDirection === 'top' ? 'column-reverse' : 'column'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames('pisell-wallet-card-content', mode, (!isLogin || isGuide) && 'pisell-wallet-card-guest-content'),
    style: backgroundStyle
  }, isLogin ? !isGuide ? /*#__PURE__*/React.createElement("div", {
    onClick: function onClick() {
      goWallet();
    }
  }, /*#__PURE__*/React.createElement(CardHeader, {
    mode: mode,
    showWalletName: showWalletName,
    showIcon: showIcon,
    iconImg: iconImg,
    walletName: walletName,
    shopName: shopName,
    showShopName: showShopName,
    cardNo: cardNo,
    showCardNo: showCardNo,
    showCode: showCode,
    cardStyle: cardStyle,
    codeType: codeType,
    onCodeClick: handleCodeClick,
    isLogin: isLogin,
    showViewPin: showViewPin,
    onViewPinClick: onViewPinClick
  }), /*#__PURE__*/React.createElement(CardContent, {
    items: items,
    symbol: symbol
  })) : /*#__PURE__*/React.createElement(Guide, {
    setting: props
  }) : /*#__PURE__*/React.createElement(Guest, {
    setting: props
  })), cardStyle === 'full' && isLogin && /*#__PURE__*/React.createElement("div", {
    className: classNames('pisell-wallet-card-showCode', codeDirection === 'top' ? 'code-top' : 'code-bottom')
  }, /*#__PURE__*/React.createElement(CodeDisplay, {
    codeType: codeType,
    cardNo: cardNo
  })))), /*#__PURE__*/React.createElement(CodeModal, {
    isOpen: isModalOpen,
    onClose: closeModal,
    codeType: codeType,
    cardNo: cardNo,
    platform: platform
  }));
};
export default WalletCard;