import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _objectWithoutProperties } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
import WalletPass_default from "../PaymentMethods/WalletPass/index.js";
import WalletAvailable_default from "./components/WalletAvailable/index.js";
import WalletUseList from "./components/WalletUseList/index.js";
import WalletBestValueFound_default from "./components/WalletBestValueFound/index.js";
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
import { locales } from "@pisell/utils";
import { Button, Icon, Iconfont, PisellRow, PisellText } from "@pisell/materials";
import classNames from "classnames";
import { CaretRightOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/components/pay/toC/WalletPassBlock/index.tsx
const _excluded = [
	"className",
	"payGroup",
	"onWalletPassChange",
	"customer_id",
	"walletSetting"
];
const WalletPassBlock = (props, ref) => {
	var _payGroup$walletPass, _payGroup$walletPass4, _payGroup$walletPass5, _payGroup$walletPass6, _payGroup$walletPass7;
	const { className, payGroup, onWalletPassChange, customer_id, walletSetting } = props, others = _objectWithoutProperties(props, _excluded);
	const walletPassRef = useRef(null);
	const walletAvailableRef = useRef(null);
	const walletBestValueFoundRef = useRef(null);
	const [isViewDetail, setIsViewDetail] = useState(false);
	const contentRef = useRef(null);
	const [contentHeight, setContentHeight] = useState(0);
	useEffect(() => {
		if (contentRef.current) {
			const scrollHeight = contentRef.current.scrollHeight;
			setContentHeight(isViewDetail ? scrollHeight : 0);
		}
	}, [isViewDetail, payGroup === null || payGroup === void 0 || (_payGroup$walletPass = payGroup.walletPass) === null || _payGroup$walletPass === void 0 ? void 0 : _payGroup$walletPass.cards]);
	const handleClick = () => {
		var _walletPassRef$curren;
		setIsViewDetail(false);
		(_walletPassRef$curren = walletPassRef.current) === null || _walletPassRef$curren === void 0 || _walletPassRef$curren.init(_objectSpread2(_objectSpread2({}, payGroup), {}, { customer_id }));
	};
	const hasNoWalletPassAmount = useMemo(() => {
		var _payGroup$walletPass2, _payGroup$walletPass3;
		return !(payGroup === null || payGroup === void 0 || (_payGroup$walletPass2 = payGroup.walletPass) === null || _payGroup$walletPass2 === void 0 ? void 0 : _payGroup$walletPass2.amount) || (payGroup === null || payGroup === void 0 || (_payGroup$walletPass3 = payGroup.walletPass) === null || _payGroup$walletPass3 === void 0 ? void 0 : _payGroup$walletPass3.amount) == 0;
	}, [payGroup === null || payGroup === void 0 || (_payGroup$walletPass4 = payGroup.walletPass) === null || _payGroup$walletPass4 === void 0 ? void 0 : _payGroup$walletPass4.amount]);
	useImperativeHandle(ref, () => ({ open: () => {
		if (hasNoWalletPassAmount) {
			var _walletAvailableRef$c;
			(_walletAvailableRef$c = walletAvailableRef.current) === null || _walletAvailableRef$c === void 0 || _walletAvailableRef$c.open();
		} else {
			var _walletBestValueFound;
			(_walletBestValueFound = walletBestValueFoundRef.current) === null || _walletBestValueFound === void 0 || _walletBestValueFound.open();
		}
	} }));
	const handleViewDetail = (e) => {
		e.stopPropagation();
		setIsViewDetail(!isViewDetail);
	};
	const handleUnused = () => {
		onWalletPassChange === null || onWalletPassChange === void 0 || onWalletPassChange({
			cards: [],
			amount: 0
		});
	};
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", _objectSpread2(_objectSpread2({}, others), {}, { className: classNames("wallet-pass-wrap", className) }), /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-title" }, locales.getText("tocPay.text.howToPay")), /* @__PURE__ */ React.createElement(PisellRow, {
		className: "wallet-pass-card",
		centerContent: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-card-title" }, /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-card-title-left" }, /* @__PURE__ */ React.createElement(Icon, {
			type: "pisell2-a-wallet-021",
			className: "wallet-pass-card-title-left-icon"
		}), walletSetting.name), walletSetting.popup_status === 1 && /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-card-title-right" }, /* @__PURE__ */ React.createElement("span", { className: "wallet-pass-card-title-right-amount" }, "-", /* @__PURE__ */ React.createElement(PisellText.Amount, { value: payGroup === null || payGroup === void 0 || (_payGroup$walletPass5 = payGroup.walletPass) === null || _payGroup$walletPass5 === void 0 ? void 0 : _payGroup$walletPass5.amount })), /* @__PURE__ */ React.createElement(CaretRightOutlined, { className: "wallet-pass-card-title-right-icon" }))), walletSetting.popup_status === 0 && /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-card-desc-wrap" }, /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-card-desc" }, hasNoWalletPassAmount ? locales.getText("tocPay.text.hasNoWalletPassAmount") : locales.getText("tocPay.text.bestValueFound")), !hasNoWalletPassAmount && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-card-total-savings" }, /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-card-total-savings-title" }, /* @__PURE__ */ React.createElement("span", { className: "wallet-pass-card-total-savings-title-left" }, locales.getText("tocPay.text.totalSavings"), ":", /* @__PURE__ */ React.createElement(PisellText.Amount, { value: payGroup === null || payGroup === void 0 || (_payGroup$walletPass6 = payGroup.walletPass) === null || _payGroup$walletPass6 === void 0 ? void 0 : _payGroup$walletPass6.amount })), /* @__PURE__ */ React.createElement("span", {
			className: "wallet-pass-card-total-savings-title-right",
			onClick: handleViewDetail
		}, locales.getText("tocPay.text.viewDetail"), /* @__PURE__ */ React.createElement(Icon, {
			type: "pisell2-chevron-down",
			className: classNames("wallet-pass-card-total-savings-title-right-icon", { "is-rotate": isViewDetail })
		}))), /* @__PURE__ */ React.createElement("div", {
			ref: contentRef,
			className: "wallet-pass-card-total-savings-desc",
			style: { height: contentHeight }
		}, /* @__PURE__ */ React.createElement(WalletUseList, { walletPass: (payGroup === null || payGroup === void 0 || (_payGroup$walletPass7 = payGroup.walletPass) === null || _payGroup$walletPass7 === void 0 ? void 0 : _payGroup$walletPass7.cards) || [] })))), /* @__PURE__ */ React.createElement(Button, {
			size: "large",
			className: "wallet-pass-card-to-use",
			type: "primary",
			block: true,
			rightIcon: /* @__PURE__ */ React.createElement(Iconfont, {
				type: "pisell2-arrow-right",
				className: "wallet-pass-card-icon"
			})
		}, locales.getText(hasNoWalletPassAmount ? "tocPay.text.useWalletPass" : "tocPay.text.editWalletPass")(walletSetting.name)))),
		padding: 16,
		gap: 4,
		onClick: handleClick
	}), ((payGroup === null || payGroup === void 0 ? void 0 : payGroup.wait_amount) || 0) == 0 && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-card-complete-title" }, locales.getText("tocPay.text.walletPassCompleteTitle")), /* @__PURE__ */ React.createElement("div", { className: "wallet-pass-card-complete-no-extre-pay" }, locales.getText("tocPay.text.walletPassNoExtraPay")))), /* @__PURE__ */ React.createElement(WalletPass_default, {
		ref: walletPassRef,
		walletSetting,
		onWalletPassChange,
		walletPass: payGroup === null || payGroup === void 0 ? void 0 : payGroup.walletPass,
		orderDetail: payGroup === null || payGroup === void 0 ? void 0 : payGroup.orderDetail,
		total_amount: payGroup === null || payGroup === void 0 ? void 0 : payGroup.total_amount
	}), /* @__PURE__ */ React.createElement(WalletAvailable_default, {
		ref: walletAvailableRef,
		walletSetting,
		payGroup,
		onOk: handleClick
	}), /* @__PURE__ */ React.createElement(WalletBestValueFound_default, {
		ref: walletBestValueFoundRef,
		walletSetting,
		payGroup,
		onEdit: handleClick,
		onUnused: handleUnused
	}));
};
var WalletPassBlock_default = forwardRef(WalletPassBlock);
//#endregion
export { WalletPassBlock_default as default };
