import { _asyncToGenerator } from "../../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import { Context } from "../../../model.js";
import { batchDeleteCards, getCreditCardList } from "./serve.js";
import React, { forwardRef, useContext, useImperativeHandle, useMemo, useState } from "react";
import { Button } from "antd";
import { locales } from "@pisell/utils";
import { Iconfont, PisellCheckboxGroup, PisellLoading, PisellModal, PisellRow, PisellText, getBankCardTypeImg } from "@pisell/materials";
import classNames from "classnames";
import { useDebounceFn } from "ahooks";
import "./index.less";
//#region src/components/pay/toC/PaymentMethods/MWCreditCard/List/index.tsx
/**
* @title: 信用卡列表
* @description:
* @return {*}
* @Author: zhiwei.Wang
* @Date: 2024-08-16 11:04
*/
const MWCreditCardList = (props, ref) => {
	const { state } = useContext(Context);
	const [open, setOpen] = useState(false);
	const [currentCard, setCurrentCard] = useState(0);
	const [loading, setLoading] = useState(false);
	const [creditCardList, setCreditCardList] = useState([]);
	const [manage, setManage] = useState(false);
	const [order, setOrder] = useState(null);
	/**
	* @title: 获取卡列表
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:07
	*/
	const _getCreditCardList = function() {
		var _ref = _asyncToGenerator(function* () {
			const cardList = yield getCreditCardList();
			if (!cardList.length) {
				var _props$onAdd;
				(_props$onAdd = props.onAdd) === null || _props$onAdd === void 0 || _props$onAdd.call(props);
				setLoading(false);
				return;
			}
			setCreditCardList(cardList);
			if (cardList.length) setCurrentCard(cardList[0].id);
			setLoading(false);
		});
		return function _getCreditCardList() {
			return _ref.apply(this, arguments);
		};
	}();
	/**
	* @title: 初始化
	* @description:
	* @param {any} _order
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:08
	*/
	const init = function() {
		var _ref2 = _asyncToGenerator(function* (_order) {
			if (!creditCardList.length) setLoading(true);
			setOrder(_order);
			setOpen(true);
			setManage(false);
			setCurrentCard(0);
			_getCreditCardList();
		});
		return function init(_x) {
			return _ref2.apply(this, arguments);
		};
	}();
	/**
	* @title: 设置卡
	* @description:
	* @param {number} id
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:09
	*/
	const cardChange = (id) => {
		setCurrentCard(id);
	};
	/**
	* @title: 关闭弹窗
	* @description: 供外部调用，直接关闭卡列表弹窗
	*/
	const close = () => {
		setOpen(false);
	};
	useImperativeHandle(ref, () => ({
		init,
		close
	}));
	/**
	* @title: 自定义选项
	* @description:
	* @param {any} d
	* @param {boolean} active
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:09
	*/
	const renderOption = (d, active) => {
		return /* @__PURE__ */ React.createElement(PisellRow, {
			key: d.id,
			platform: "h5",
			gap: 12,
			centerContentFill: true,
			leftContent: /* @__PURE__ */ React.createElement("img", {
				className: "credit-card-type-image",
				src: getBankCardTypeImg(d.card_number)
			}),
			centerContent: /* @__PURE__ */ React.createElement("div", { className: classNames("credit-card-name", { "text-active-color": active }) }, d.card_number),
			rightContent: manage ? /* @__PURE__ */ React.createElement(Iconfont, {
				type: "pisell2-trash-01",
				className: "remove-card-icon",
				onClick: () => {
					changeCreditCard(d.id);
				}
			}) : void 0
		});
	};
	/**
	* @title: 点击取消
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:09
	*/
	const onCancel = () => {
		if (manage) {
			setManage(false);
			resetCards();
			return;
		}
		setOpen(false);
	};
	/**
	* @title: 重置卡的删除状态
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:10
	*/
	const resetCards = () => {
		let _list = [...creditCardList];
		_list.forEach((d) => {
			if (d.delete) d.delete = 0;
		});
		setCreditCardList(_list);
	};
	/**
	* @title: 批量删除卡
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:10
	*/
	const handleBatchDeleteCards = () => {
		let deleteList = creditCardList.filter((d) => d.delete === 1);
		let newList = creditCardList.filter((d) => d.delete !== 1);
		let ids = deleteList.map((d) => d.id);
		if (ids.length) {
			setCreditCardList(newList);
			batchDeleteCards({ card_ids: ids });
		}
	};
	/**
	* @title: 点击确认
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:11
	*/
	const { run: onOk } = useDebounceFn(() => {
		var _props$onChange;
		if (manage) {
			setManage(false);
			handleBatchDeleteCards();
			return;
		}
		let cur = creditCardList.find((d) => d.id === currentCard);
		(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, cur);
	}, { wait: 300 });
	const renderList = useMemo(() => {
		return creditCardList.filter((d) => d.delete !== 1);
	}, [creditCardList]);
	const changeCreditCard = (id) => {
		let _list = [...creditCardList];
		_list.forEach((d) => {
			if (d.id === id) d.delete = 1;
		});
		setCreditCardList(_list);
	};
	const okText = useMemo(() => {
		var _state$payGroup;
		let current = (_state$payGroup = state.payGroup) === null || _state$payGroup === void 0 ? void 0 : _state$payGroup.otherPayment;
		if (current === null || current === void 0 ? void 0 : current.surcharge) {
			var _state$payGroup2;
			return /* @__PURE__ */ React.createElement("div", { className: "" }, locales.getText("tocPay.text.pay"), " ", /* @__PURE__ */ React.createElement(PisellText.Amount, { value: ((_state$payGroup2 = state.payGroup) === null || _state$payGroup2 === void 0 ? void 0 : _state$payGroup2.wait_amount) || 0 }), " +", locales.getText("tocPay.text.surcharge"));
		} else {
			var _state$payGroup3;
			return /* @__PURE__ */ React.createElement("div", { className: "" }, locales.getText("tocPay.text.pay"), " ", /* @__PURE__ */ React.createElement(PisellText.Amount, { value: ((_state$payGroup3 = state.payGroup) === null || _state$payGroup3 === void 0 ? void 0 : _state$payGroup3.wait_amount) || 0 }));
		}
	}, [state.payGroup]);
	return /* @__PURE__ */ React.createElement(PisellModal, {
		title: /* @__PURE__ */ React.createElement("div", null, locales.getText("tocPay.text.creditorDebitCard")),
		open,
		onCancel,
		cancelVisible: false,
		okText: manage ? locales.getText("tocPay.text.done") : okText,
		onOk,
		okButtonProps: {
			disabled: !currentCard,
			loading: props.btnLoading,
			style: {
				display: "flex",
				justifyContent: "center",
				alignItems: "center"
			}
		},
		bodyStyle: { padding: 24 }
	}, !manage && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(PisellLoading, {
		loading,
		mask: true
	}, /* @__PURE__ */ React.createElement(PisellCheckboxGroup, {
		platform: "h5",
		options: renderList,
		value: currentCard,
		iconPosition: "right",
		mode: "single",
		rowKey: "id",
		className: "credit-card-list",
		gap: 12,
		onChange: cardChange,
		optionClassName: "credit-card-item",
		renderOption
	})), !loading && /* @__PURE__ */ React.createElement(Button, {
		icon: /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-plus" }),
		type: "dashed",
		className: "credit-card-add-button",
		onClick: props.onAdd
	}, /* @__PURE__ */ React.createElement("span", null, locales.getText("tocPay.text.addCreditOrDebitCard")))), manage && /* @__PURE__ */ React.createElement("div", { className: "credit-card-list manage-credit-card-list" }, renderList.map((d) => /* @__PURE__ */ React.createElement("div", {
		className: "credit-card-item manage-credit-card",
		key: d.id
	}, renderOption(d)))), !manage && renderList.length ? /* @__PURE__ */ React.createElement(Button, {
		type: "text",
		className: "credit-card-manage-button",
		onClick: () => {
			setManage(!manage);
		}
	}, locales.getText("tocPay.text.manageCard")) : null);
};
var List_default = forwardRef(MWCreditCardList);
//#endregion
export { List_default as default };
