import useEngineContext from "../../../hooks/useEngineContext.js";
import { getPunctuationMark } from "../utils.js";
import DepositModal from "./components/PolicyModal/index.js";
import React, { useCallback, useMemo, useState } from "react";
import { Checkbox } from "antd";
import { locales } from "@pisell/utils";
import { PisellText } from "@pisell/materials";
import "./index.less";
//#region src/components/appointmentBooking/deposit/index.tsx
const Deposit = (props) => {
	var _context$engine2;
	const { protocols, total, title, isAgreePolicy = true, isShowTitle = true, onChange, depositProtocolRequest } = props;
	const context = useEngineContext();
	const [visible, setVisible] = useState(false);
	const [policyItem, setPolicyItem] = useState();
	const isEn = useMemo(() => {
		var _context$engine;
		return ((context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en") === "en";
	}, [context === null || context === void 0 || (_context$engine2 = context.engine) === null || _context$engine2 === void 0 || (_context$engine2 = _context$engine2.props) === null || _context$engine2 === void 0 ? void 0 : _context$engine2.locale]);
	/**
	* @title: 协议文案
	* @description: 根据中英文不同显示文案不同
	* @param {*} useMemo
	* @return {*}
	* @Author: wh
	* @Date: 2023-01-30 16:25
	*/
	const _policyText = useCallback((item, index) => {
		if (!item || !(protocols === null || protocols === void 0 ? void 0 : protocols.length)) return "";
		return getPunctuationMark(index, protocols.length, isEn);
	}, [protocols]);
	const handleAgreed = () => {
		onChange && onChange(!isAgreePolicy);
	};
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "appointment-deposit-bottom" }, isShowTitle ? /* @__PURE__ */ React.createElement("span", { className: "title" }, title) : null, /* @__PURE__ */ React.createElement("div", { className: "tip" }, isEn ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PisellText.Amount, {
		value: total,
		showCurrencySymbol: true,
		className: "amount"
	}), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.appointment.deposit.amount.tip1"))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.appointment.deposit.amount.tip1")), /* @__PURE__ */ React.createElement(PisellText.Amount, {
		value: total,
		showCurrencySymbol: true,
		className: "amount"
	}), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.appointment.deposit.amount.tip2")))), (protocols === null || protocols === void 0 ? void 0 : protocols.length) > 0 ? /* @__PURE__ */ React.createElement("div", {
		className: "checkbox-wrap",
		onClick: () => handleAgreed()
	}, /* @__PURE__ */ React.createElement(Checkbox, { checked: isAgreePolicy }), /* @__PURE__ */ React.createElement("div", { className: "policy-box" }, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.appointment.deposit.agreed")), /* @__PURE__ */ React.createElement("div", { className: "policy-wrap" }, protocols === null || protocols === void 0 ? void 0 : protocols.map((item, index) => {
		return /* @__PURE__ */ React.createElement("span", {
			key: item === null || item === void 0 ? void 0 : item.id,
			onClick: (e) => {
				e.stopPropagation();
				e.preventDefault();
				setPolicyItem(item);
				setVisible(true);
			}
		}, item === null || item === void 0 ? void 0 : item.title, /* @__PURE__ */ React.createElement("span", { className: "symbol" }, _policyText(item, index)));
	})))) : null), /* @__PURE__ */ React.createElement(DepositModal, {
		open: visible,
		onCancel: () => setVisible(false),
		item: policyItem,
		depositProtocolRequest
	}));
};
//#endregion
export { Deposit as default };
