import WalletUseList from "../WalletUseList/index.js";
import React, { forwardRef, useImperativeHandle, useState } from "react";
import { Button } from "antd";
import { locales } from "@pisell/utils";
import { Icon, PisellModal, PisellText } from "@pisell/materials";
import "./index.less";
//#region src/components/pay/toC/WalletPassBlock/components/WalletBestValueFound/index.tsx
const WalletBestValueFound = (props, ref) => {
	var _payGroup$walletPass, _payGroup$walletPass2;
	const { onEdit, walletSetting, payGroup, onUnused } = props;
	const [open, setOpen] = useState(false);
	useImperativeHandle(ref, () => ({ open: () => {
		setOpen(true);
	} }));
	const handleEdit = () => {
		setOpen(false);
		onEdit();
	};
	return /* @__PURE__ */ React.createElement(PisellModal, {
		title: locales.getText("tocPay.text.bestValueFound"),
		open,
		footer: null,
		headerDivider: false,
		closable: true,
		onCancel: () => setOpen(false),
		onOk: () => setOpen(false),
		wrapClassName: "toc-pay-wallet-best-value-found-modal",
		mobileModalHeight: "auto"
	}, /* @__PURE__ */ React.createElement("div", { className: "toc-pay-wallet-best-value-found-container" }, /* @__PURE__ */ React.createElement("div", { className: "toc-pay-wallet-best-value-found-header" }, /* @__PURE__ */ React.createElement("div", { className: "toc-pay-wallet-best-value-found-wallet-icon" }, /* @__PURE__ */ React.createElement(Icon, {
		type: "pisell2-a-wallet-021",
		className: "toc-pay-wallet-best-value-found-icon"
	})), /* @__PURE__ */ React.createElement("h3", { className: "toc-pay-wallet-best-value-found-subtitle" }, locales.getText("tocPay.text.welcomeToUseWalletPass")(walletSetting.name))), /* @__PURE__ */ React.createElement("div", { className: "toc-pay-wallet-best-value-found-savings-card" }, /* @__PURE__ */ React.createElement("div", { className: "toc-pay-wallet-best-value-found-savings-row" }, /* @__PURE__ */ React.createElement("span", { className: "toc-pay-wallet-best-value-found-label" }, locales.getText("tocPay.text.totalSavings")), /* @__PURE__ */ React.createElement("span", { className: "toc-pay-wallet-best-value-found-amount" }, /* @__PURE__ */ React.createElement(PisellText.Amount, { value: payGroup === null || payGroup === void 0 || (_payGroup$walletPass = payGroup.walletPass) === null || _payGroup$walletPass === void 0 ? void 0 : _payGroup$walletPass.amount }))), /* @__PURE__ */ React.createElement("div", { className: "toc-pay-wallet-best-value-found-description" }, locales.getText("tocPay.text.bestCombination")(walletSetting.name))), /* @__PURE__ */ React.createElement("div", { className: "toc-pay-wallet-best-value-found-recommended-section" }, /* @__PURE__ */ React.createElement("h4", { className: "toc-pay-wallet-best-value-found-section-title" }, locales.getText("tocPay.text.recommended")), /* @__PURE__ */ React.createElement("div", { className: "toc-pay-wallet-best-value-found-option-list" }, /* @__PURE__ */ React.createElement(WalletUseList, { walletPass: (payGroup === null || payGroup === void 0 || (_payGroup$walletPass2 = payGroup.walletPass) === null || _payGroup$walletPass2 === void 0 ? void 0 : _payGroup$walletPass2.cards) || [] }))), /* @__PURE__ */ React.createElement("div", { className: "toc-pay-wallet-best-value-found-actions" }, /* @__PURE__ */ React.createElement(Button, {
		className: "toc-pay-wallet-best-value-found-edit-button",
		onClick: handleEdit
	}, locales.getText("tocPay.text.edit")), /* @__PURE__ */ React.createElement(Button, {
		type: "primary",
		className: "toc-pay-wallet-best-value-found-confirm-button",
		onClick: () => setOpen(false)
	}, locales.getText("tocPay.text.confirm"))), /* @__PURE__ */ React.createElement("div", {
		className: "toc-pay-wallet-best-value-found-footer",
		onClick: () => {
			setOpen(false);
			onUnused();
		}
	}, locales.getText("tocPay.text.unusedAndContinueToPayment"))));
};
var WalletBestValueFound_default = forwardRef(WalletBestValueFound);
//#endregion
export { WalletBestValueFound_default as default };
