import { getText } from "../../locales/index.js";
import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import IconFont from "../iconfont/index.js";
import PisellModal from "../pisellModal/index.js";
import useEngineContext from "../../hooks/useEngineContext.js";
import Amount from "../pisellText/components/Amount/index.js";
import Guest from "./Guest/index.js";
import Guide from "./Guide/index.js";
import React, { useMemo, useState } from "react";
import { Button, Card, QRCode } from "antd";
import classNames from "classnames";
import Barcode from "react-barcode";
import EyeOff from "@pisell/icon/es/EyeOff";
import "./index.less";
//#region src/components/walletCard/index.tsx
const 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"
			}
		}
	]
};
const toBooleanValue = (value) => {
	if (value === void 0) return false;
	if (value === 0 || value === "0") return false;
	if (value === 1 || value === "1") return true;
	return !!value;
};
const useCodeModal = (cardNo, onCodeClick, codeType) => {
	var _context$appHelper;
	const [isModalOpen, setIsModalOpen] = useState(false);
	const { interaction } = ((_context$appHelper = useEngineContext().appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {};
	const 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 ? void 0 : _interaction$utils$is.call(_interaction$utils)) {
			var _interaction$utils2, _interaction$utils2$p;
			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: {
						qrCode: "qrCode",
						barCode: "barCode"
					}[codeType] || codeType,
					value: cardNo
				}
			});
			return;
		}
		if (onCodeClick) onCodeClick();
		else setIsModalOpen(true);
	};
	const closeModal = (e) => {
		e === null || e === void 0 || e.stopPropagation();
		setIsModalOpen(false);
	};
	return {
		isModalOpen,
		handleCodeClick,
		closeModal
	};
};
const 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__ */ 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)), showHolderName && /* @__PURE__ */ React.createElement("div", { className: classNames("pisell-wallet-card-header-holder-name") }, holderName), 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"
	}))));
};
const CardItem = ({ item, symbol }) => {
	var _context$appHelper2;
	const { type, custom_title, value } = item;
	const context = useEngineContext();
	const utils = context === null || context === void 0 || (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 ? void 0 : _context$appHelper2.utils;
	const translationOriginal = (utils === null || utils === void 0 ? void 0 : utils.translationOriginal) || (utils === null || utils === void 0 ? void 0 : utils.translation);
	return /* @__PURE__ */ React.createElement("div", { className: "pisell-wallet-card-item" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-wallet-card-item-label" }, translationOriginal(custom_title || "") || ""), /* @__PURE__ */ React.createElement("div", { className: "pisell-wallet-card-item-value" }, type === "rechargeable" ? /* @__PURE__ */ React.createElement(Amount, {
		className: "pisell-card-amount-item-value",
		platform: "h5",
		symbol,
		useThousandsSeparator: true,
		showCurrencySymbol: true,
		value
	}) : value || "0"));
};
const CardContent = ({ items, symbol }) => {
	const filteredItems = (items || []).filter((item) => item.display !== 0);
	return /* @__PURE__ */ React.createElement("div", {
		className: "pisell-wallet-card-list",
		style: { justifyContent: filteredItems.length > 1 ? "space-between" : "flex-start" }
	}, filteredItems.map((item, index) => /* @__PURE__ */ React.createElement(CardItem, {
		key: index,
		item,
		symbol
	})));
};
const CodeDisplay = ({ codeType, 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)));
};
const blockEvent = (e) => {
	e.stopPropagation();
	e.preventDefault();
	if (e.nativeEvent) {
		e.nativeEvent.stopImmediatePropagation();
		e.nativeEvent.preventDefault();
	}
	return false;
};
const CodeModal = ({ isOpen, onClose, codeType, cardNo, platform }) => {
	return /* @__PURE__ */ React.createElement(PisellModal, {
		title: getText(codeType === "barCode" ? "walletCard-barcode" : "walletCard-qrcode"),
		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,
		cardNo
	})));
};
const WalletCard = (props) => {
	var _props$walletGuideCon2;
	const mergedProps = _objectSpread2(_objectSpread2({}, 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 || mergedProps === void 0 ? void 0 : mergedProps.showViewPin);
	const { utils } = useEngineContext().appHelper || {};
	const { isModalOpen, handleCodeClick, closeModal } = useCodeModal(cardNo, onCodeClick, codeType);
	console.log("showViewPin", props);
	const backgroundStyle = useMemo(() => {
		if (props.customBackgroundImage) return { backgroundImage: `url(${props.customBackgroundImage})` };
		else {
			var _props$walletGuideCon;
			if ((props === null || props === void 0 || (_props$walletGuideCon = props.walletGuideConfig) === null || _props$walletGuideCon === void 0 ? void 0 : _props$walletGuideCon.backgroundColor) && isGuide || (props === null || props === void 0 ? 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,
		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
	]);
	const goWallet = () => {
		if (!(items === null || items === void 0 ? void 0 : items.length)) return;
		const data = {
			id: props.id,
			holder_id: holder === null || holder === void 0 ? void 0 : holder.holder_id
		};
		utils === null || utils === void 0 || utils.action({
			type: "pisell1.goWallet",
			data,
			callback: () => {}
		});
	};
	/**
	* 查看PIN的回调
	*/
	const onViewPinClick = (e) => {
		e.stopPropagation();
		if (props === null || props === void 0 ? void 0 : props.onViewPinClick) props.onViewPinClick();
		else console.error("onViewPinClick方法需要传入");
	};
	const _renderMask = () => {
		if (typeof onSetHolder !== "function") return null;
		if ((holder === null || holder === void 0 ? void 0 : holder.holder_type) === "form" && !(holder === null || holder === void 0 ? void 0 : holder.holder_id)) return /* @__PURE__ */ React.createElement("div", { className: "pisell-wallet-add-holder-mask" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-wallet-add-holder-mask-text" }, getText("pisell2.wallet-card.add-holder-tip")), /* @__PURE__ */ React.createElement(Button, {
			type: "primary",
			className: "pisell-wallet-add-holder-mask-button",
			onClick: () => onSetHolder === null || onSetHolder === void 0 ? void 0 : onSetHolder()
		}, getText("pisell2.wallet-card.add-holder-button-text"), /* @__PURE__ */ React.createElement(IconFont, {
			type: "pisell2-user-edit",
			style: { fontSize: 16 }
		})));
		return null;
	};
	const _showHolderName = useMemo(() => {
		return (holder === null || holder === void 0 ? void 0 : holder.holder_type) === "form" && showHolderName;
	}, [holder, showHolderName]);
	const holderName = useMemo(() => {
		var _holder$detail;
		if ((holder === null || holder === void 0 ? void 0 : holder.holder_type) === "form" && !(holder === null || holder === void 0 ? void 0 : holder.holder_id)) return "--";
		return (holder === null || holder === void 0 || (_holder$detail = holder.detail) === null || _holder$detail === void 0 ? void 0 : _holder$detail.main_field) || "";
	}, [holder]);
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-wallet-card-wrapper", className),
		style,
		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" }
	}, _renderMask(), /* @__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: () => {
		goWallet();
	} }, /* @__PURE__ */ React.createElement(CardHeader, {
		mode,
		showWalletName,
		showIcon,
		iconImg,
		walletName,
		shopName,
		showShopName,
		cardNo,
		showCardNo,
		showCode,
		cardStyle,
		codeType,
		onCodeClick: handleCodeClick,
		isLogin,
		showViewPin,
		onViewPinClick,
		showHolderName: _showHolderName,
		holderName
	}), /* @__PURE__ */ React.createElement(CardContent, {
		items,
		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,
		cardNo
	})))), /* @__PURE__ */ React.createElement(CodeModal, {
		isOpen: isModalOpen,
		onClose: closeModal,
		codeType,
		cardNo,
		platform
	}));
};
//#endregion
export { WalletCard as default };
