import { formatMachineCodeServer2CardList } from "./utils.js";
import { useWalletPass } from "../../hooks/useWalletPass.js";
import WalletPassHeader from "./components/WalletPassHeader/index.js";
import WalletPassCardDisplay from "./components/WalletPassCardDisplay/index.js";
import WalletModal from "./components/WalletModal/index.js";
import DiscountWallet from "./components/DiscountWallet/index.js";
import { WALLET_PASS_CODE_ARRAY } from "../../constants.js";
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { locales } from "@pisell/utils";
import { PisellLoading } from "@pisell/materials";
import "./index.less";
//#region src/components/checkout/components/WalletPassModule/index.tsx
const WalletPassModule = forwardRef((props, ref) => {
	var _locales$getText;
	const { orderInfo, onSelectChange, customAmount, paymentItems, clientId } = props;
	const { handleSelectWallet, cardData, selectedWalletIds, expiredWalletIds, expiredWalletData, disabledWalletData, clearAllSelectedWallet, clearDisabledWalletData, handleBestSaving, loading, handleSearchIdentificationCode, availableDiscountList, selectedDiscountList, handleSelectDiscount, customerName, handleConfirmEditAmount, handleBeforeEditAmount } = useWalletPass({
		onSelectChange,
		customAmount,
		totalAmount: Number(orderInfo === null || orderInfo === void 0 ? void 0 : orderInfo.totalAmount) || 0,
		clientId
	});
	const [expiredModalVisible, setExpiredModalVisible] = useState(false);
	const [disabledModalVisible, setDisabledModalVisible] = useState(false);
	const [isCardMode, setIsCardMode] = useState(true);
	const handleExpiredClick = () => {
		setExpiredModalVisible(true);
	};
	const handleExpiredModalClose = () => {
		setExpiredModalVisible(false);
	};
	const handleDisabledModalClose = () => {
		setDisabledModalVisible(false);
		clearDisabledWalletData();
	};
	const toggleDisplayMode = () => {
		setIsCardMode(!isCardMode);
	};
	const handleDetail = (record, index) => {};
	const formattedDisabledWalletData = React.useMemo(() => {
		return formatMachineCodeServer2CardList(disabledWalletData || [], [], {
			error: true,
			showStatus: false
		});
	}, [disabledWalletData]);
	useEffect(() => {
		if (disabledWalletData && disabledWalletData.length > 0) {
			if (!disabledModalVisible) setDisabledModalVisible(true);
		}
	}, [disabledWalletData, disabledModalVisible]);
	useImperativeHandle(ref, () => ({
		handleSearchIdentificationCode,
		getWalletPassData: (select) => ({
			selectedWallet: select.length ? cardData.filter((card) => selectedWalletIds.includes(card.id)) : [],
			availableDiscountList,
			selectedDiscountList
		})
	}));
	const disabledTitle = useMemo(() => {
		if (disabledWalletData && disabledWalletData.length === 1) {
			var _disabledWalletData$;
			return ((_disabledWalletData$ = disabledWalletData[0]) === null || _disabledWalletData$ === void 0 || (_disabledWalletData$ = _disabledWalletData$.unified_messages) === null || _disabledWalletData$ === void 0 ? void 0 : _disabledWalletData$.title) || "";
		}
		return locales.getText("wallet-pass-module-disabled-modal-title");
	}, [disabledWalletData]);
	const selectedCount = useMemo(() => {
		return selectedWalletIds.length + selectedDiscountList.length;
	}, [selectedWalletIds.length, selectedDiscountList.length]);
	const discountDisabled = useMemo(() => {
		if (Number(orderInfo === null || orderInfo === void 0 ? void 0 : orderInfo.totalAmount) === 0) return true;
		return !!(paymentItems === null || paymentItems === void 0 ? void 0 : paymentItems.some((item) => {
			return !WALLET_PASS_CODE_ARRAY.includes(item.code) && !item.isSynced;
		}));
	}, [paymentItems, orderInfo]);
	if (cardData.length === 0 && availableDiscountList.length === 0 && disabledWalletData.length === 0) return null;
	return /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-module-container" }, /* @__PURE__ */ React.createElement(PisellLoading, {
		delay: 300,
		loading,
		fullscreen: false,
		mask: {
			backgroundColor: "rgba(255, 255, 255, 0.5)",
			width: "100%",
			height: "100%"
		}
	}, /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-module" }, /* @__PURE__ */ React.createElement(WalletPassHeader, {
		customerName,
		selectedCount,
		expiredCount: expiredWalletIds.length,
		isCardMode,
		onExpiredClick: handleExpiredClick,
		onBestSaving: handleBestSaving,
		onClearAll: clearAllSelectedWallet,
		onToggleDisplayMode: toggleDisplayMode
	}), /* @__PURE__ */ React.createElement(WalletPassCardDisplay, {
		isCardMode,
		cardData,
		selectedWalletIds,
		onSelectWallet: handleSelectWallet,
		onDetail: handleDetail,
		onConfirmEditAmount: handleConfirmEditAmount,
		onBeforeEditAmount: handleBeforeEditAmount
	}), /* @__PURE__ */ React.createElement(DiscountWallet, {
		isCardMode,
		cardData: availableDiscountList,
		selectedWalletIds: selectedDiscountList,
		onSelectWallet: handleSelectDiscount,
		onDetail: handleDetail,
		discountDisabled
	}), /* @__PURE__ */ React.createElement(WalletModal, {
		visible: expiredModalVisible,
		walletData: expiredWalletData,
		onClose: handleExpiredModalClose,
		title: (_locales$getText = locales.getText("wallet-pass-module-expired-modal-title")) === null || _locales$getText === void 0 ? void 0 : _locales$getText((expiredWalletData === null || expiredWalletData === void 0 ? void 0 : expiredWalletData.length) || 0)
	}), /* @__PURE__ */ React.createElement(WalletModal, {
		visible: disabledModalVisible,
		walletData: formattedDisabledWalletData,
		onClose: handleDisabledModalClose,
		title: disabledTitle
	}))));
});
//#endregion
export { WalletPassModule as default };
