import { _asyncToGenerator } from "../../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import { Context } from "../../../model.js";
import React, { forwardRef, useContext, useImperativeHandle, useMemo, useState } from "react";
import { Checkbox, Col, Divider, Form, Row } from "antd";
import { locales } from "@pisell/utils";
import { Iconfont, PisellAlert, PisellDatePicker, PisellInput, PisellModal, PisellText, PisellToast } from "@pisell/materials";
import "./index.less";
//#region src/components/pay/toC/PaymentMethods/MWCreditCard/Add/index.tsx
/**
* @title: 格式化名称
* @description:
* @param {string} card_name
* @return {*}
* @Author: zhiwei.Wang
* @Date: 2024-08-16 11:12
*/
const formatName = (card_name) => {
	let _name = card_name || "";
	_name = _name.trim();
	if (!_name) return {
		text: "",
		error: locales.getText("tocPay.text.enterName")
	};
	_name = _name.replace("-", "");
	_name = _name.replace(/\s+/g, " ");
	let _arr = _name.split(" ");
	if (_arr.length == 0) return {
		text: "",
		error: locales.getText("tocPay.text.enterValidName")
	};
	if (_arr.length == 1) {
		_name = _name;
		return {
			text: _name,
			error: ""
		};
	} else {
		_name = _arr[0] + " " + _arr[_arr.length - 1];
		return {
			text: _name,
			error: ""
		};
	}
};
/**
* @title: 添加信用卡
* @description:
* @param {AddMWCreditCardProps} props
* @param {React} ref
* @return {*}
* @Author: zhiwei.Wang
* @Date: 2024-08-16 11:13
*/
const AddMWCreditCard = (props, ref) => {
	const { onCreate, shopName = "", btnLoading = false } = props;
	const [open, setOpen] = useState(false);
	const [form] = Form.useForm();
	const { state } = useContext(Context);
	/**
	* @title: 初始化
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:13
	*/
	const init = function() {
		var _ref = _asyncToGenerator(function* () {
			onReset();
			setOpen(true);
		});
		return function init() {
			return _ref.apply(this, arguments);
		};
	}();
	/**
	* @title: 取消
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:13
	*/
	const onCancel = () => {
		setOpen(false);
		onReset();
	};
	/**
	* @title: 检测表单是否正确
	* @description:
	* @param {any} values
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:13
	*/
	const _checkValue = (values) => {
		if (!values.card_number) {
			console.log(locales.getText("tocPay.text.enterCardNumber"));
			return;
		}
		if (values.card_number.replace(/\s/g, "").length < 16) {
			PisellToast({
				content: locales.getText("tocPay.text.enterValidCardNumber"),
				duration: 2
			});
			console.log(locales.getText("tocPay.text.enterValidCardNumber"));
			return;
		}
		let { error, text } = formatName(values.card_name);
		if (error) {
			console.log(error);
			return;
		}
		if (!/^([A-Za-z]+|[A-Za-z,.'&-]+) ([A-Za-z]+|[A-Za-z,.'&-]+)$/.test(text)) {
			PisellToast({
				content: locales.getText("tocPay.text.enterEnglishName"),
				duration: 2
			});
			console.log(locales.getText("tocPay.text.enterEnglishName"));
			return;
		}
		if (!values.date) {
			PisellToast({
				content: locales.getText("tocPay.text.enterExpirationDate"),
				duration: 2
			});
			console.log(locales.getText("tocPay.text.enterExpirationDate"));
			return;
		}
		if (!values.card_ccv) {
			PisellToast({
				content: locales.getText("tocPay.text.enterCVV"),
				duration: 2
			});
			console.log(locales.getText("tocPay.text.enterCVV"));
			return;
		}
		if ((values.card_ccv + "").length < 3) {
			PisellToast({
				content: locales.getText("tocPay.text.enterValidCVV"),
				duration: 2
			});
			console.log(locales.getText("tocPay.text.enterValidCVV"));
			return;
		}
		return true;
	};
	/**
	* @title: 重置表单
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:14
	*/
	const onReset = () => {
		form.resetFields();
	};
	/**
	* @title: 提交
	* @description:
	* @param {any} values
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 11:14
	*/
	const onFinish = (values) => {
		if (!_checkValue(values)) return;
		onCreate === null || onCreate === void 0 || onCreate(values);
	};
	const onSubmit = () => {
		form.submit();
	};
	/**
	* @title: 关闭弹窗
	* @description: 供外部调用，直接关闭添加卡片弹窗
	*/
	const close = () => {
		setOpen(false);
	};
	useImperativeHandle(ref, () => ({
		init,
		onReset,
		onSubmit,
		close
	}));
	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", { className: "secure-card-payment-title" }, locales.getText("tocPay.text.secureCardPayment"), /* @__PURE__ */ React.createElement(Iconfont, {
			type: "pisell2-shield-tick",
			className: "secure-card-payment-title-icon"
		})),
		open,
		onCancel,
		cancelVisible: false,
		onOk: onSubmit,
		okText,
		bodyStyle: {
			padding: 24,
			display: "flex",
			flexDirection: "column"
		},
		okButtonProps: {
			loading: btnLoading,
			style: {
				display: "flex",
				justifyContent: "center",
				alignItems: "center"
			}
		}
	}, /* @__PURE__ */ React.createElement("div", { className: "add-mw-credit-card-wrap" }, /* @__PURE__ */ React.createElement(PisellAlert, {
		className: "secure-card-tip-alert",
		icon: /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-shield-tick" }),
		showIcon: true,
		message: locales.getText("tocPay.text.secureBankInfo")
	}), /* @__PURE__ */ React.createElement(Form, {
		layout: "vertical",
		form,
		onFinish,
		requiredMark: false
	}, /* @__PURE__ */ React.createElement(Row, {
		style: { width: "100%" },
		gutter: [10, 0]
	}, /* @__PURE__ */ React.createElement(Col, { span: 24 }, /* @__PURE__ */ React.createElement(Form.Item, {
		label: locales.getText("tocPay.text.cardNumber"),
		name: "card_number",
		rules: [{
			required: true,
			message: locales.getText("tocPay.text.incorrectCardNumber")
		}]
	}, /* @__PURE__ */ React.createElement(PisellInput.BankCard, null))), /* @__PURE__ */ React.createElement(Col, { span: 12 }, /* @__PURE__ */ React.createElement(Form.Item, {
		label: locales.getText("tocPay.text.expiration"),
		name: "date",
		rules: [{
			required: true,
			message: locales.getText("tocPay.text.incorrectExpiryDate")
		}]
	}, /* @__PURE__ */ React.createElement(PisellDatePicker, {
		type: "input",
		format: "MM/YY"
	}))), /* @__PURE__ */ React.createElement(Col, { span: 12 }, /* @__PURE__ */ React.createElement(Form.Item, {
		label: locales.getText("tocPay.text.securityCode"),
		name: "card_ccv",
		rules: [{
			required: true,
			message: locales.getText("tocPay.text.incorrectSecurityCode")
		}]
	}, /* @__PURE__ */ React.createElement(PisellInput.SecurityCode, { maxLength: 3 }))), /* @__PURE__ */ React.createElement(Col, { span: 24 }, /* @__PURE__ */ React.createElement(Form.Item, {
		label: locales.getText("tocPay.text.cardholderName"),
		name: "card_name",
		rules: [{
			required: true,
			pattern: /* @__PURE__ */ new RegExp(/^([A-Za-z]+|[A-Za-z,.'&-]+)( ([A-Za-z]+|[A-Za-z,.'&-]+))+$/, "g"),
			message: locales.getText("tocPay.text.enterEnglishName")
		}]
	}, /* @__PURE__ */ React.createElement(PisellInput, { placeholder: locales.getText("tocPay.text.incorrectName") })))), /* @__PURE__ */ React.createElement("div", { className: "merchant-authorization-text" }, locales.getText("tocPay.text.merchantAuthorizationBefore"), /* @__PURE__ */ React.createElement("span", { className: "merchant-shop-name" }, shopName), locales.getText("tocPay.text.merchantAuthorizationAfter")), /* @__PURE__ */ React.createElement(Divider, { className: "secure-card-divider" }), /* @__PURE__ */ React.createElement(Form.Item, {
		name: "is_save",
		valuePropName: "checked",
		initialValue: true,
		className: "save-card-form-item"
	}, /* @__PURE__ */ React.createElement(Checkbox, null, /* @__PURE__ */ React.createElement("span", { className: "save-card-checkbox-text" }, locales.getText("tocPay.text.saveCardForNextTime")))), /* @__PURE__ */ React.createElement("div", { className: "save-card-encryption-text" }, locales.getText("tocPay.text.saveCardEncryption"))), /* @__PURE__ */ React.createElement("div", { className: "three-d-secure-section" }, /* @__PURE__ */ React.createElement("div", { className: "three-d-secure-badge" }, /* @__PURE__ */ React.createElement(Iconfont, {
		type: "pisell2-shield-01",
		className: "three-d-secure-icon"
	}), /* @__PURE__ */ React.createElement("span", { className: "three-d-secure-badge-text" }, "3D")), /* @__PURE__ */ React.createElement("span", { className: "three-d-secure-text" }, locales.getText("tocPay.text.threeDSecureProtection")))));
};
var Add_default = forwardRef(AddMWCreditCard);
//#endregion
export { Add_default as default };
