const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_index = require("../ClientItem/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_utils = require("@pisell/utils");
let _ant_design_icons = require("@ant-design/icons");
let _pisell_icon_es_Edit05 = require("@pisell/icon/es/Edit05");
_pisell_icon_es_Edit05 = require_runtime.__toESM(_pisell_icon_es_Edit05);
require("./index.less");
//#region src/components/booking/deposit/DepositItem/index.tsx
const statusTagColor = {
	unpaid: "#B2DDFF",
	paid: "#ABEFC6"
};
const statusBgColor = {
	unpaid: "#EFF8FF",
	paid: "#ECFDF3"
};
const DepositItem = (props) => {
	const { status, customer, totalAmountStr, onEdit, orderId, orderNumber, handleGoOrderDetail, generatePaymentLink, depositAmount, amountSymbol, createdTime, isPaid, isBookingCancelled, sendEmail, hideOrderDetail, depositPaidAmount, depositUnPaidAmount, depositOriginPaidAmount } = props;
	const rowStatus = props.status === "paid" ? "paid" : "unpaid";
	const statusText = {
		unpaid: _pisell_utils.locales.getText("pisell2.text.deposit-item-status-unpaid"),
		paid: _pisell_utils.locales.getText("pisell2.text.deposit-item-status-paid")
	};
	(0, react.useEffect)(() => {
		document.body.id = "body";
	}, []);
	const items = [{
		key: "send",
		disabled: isPaid || isBookingCancelled,
		label: /* @__PURE__ */ react.default.createElement("div", null, _pisell_utils.locales.getText("pisell2.text.send-mail"))
	}, {
		key: "1",
		disabled: isPaid || isBookingCancelled,
		label: /* @__PURE__ */ react.default.createElement("div", null, _pisell_utils.locales.getText("pisell2.text.copy-to-clipboard"))
	}];
	const onClick = ({ key }) => {
		if (key === "1") generatePaymentLink === null || generatePaymentLink === void 0 || generatePaymentLink(orderId);
		else if (key === "send") sendEmail === null || sendEmail === void 0 || sendEmail(orderId);
	};
	const handlingFee = (Number(depositPaidAmount) || 0) - (Number(depositOriginPaidAmount) || 0);
	return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__deposit-item" }, /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-lowcode__deposit-item-header",
		style: { backgroundColor: statusBgColor[rowStatus] }
	}, /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-lowcode__deposit-status",
		style: { backgroundColor: statusTagColor[rowStatus] }
	}, statusText[rowStatus]), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__deposit-item-header-right" }, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-lowcode__deposit-item-header-right-amount" }, (0, _pisell_utils.formatAmount)(depositAmount, 2, amountSymbol)), !(isPaid || isBookingCancelled) && /* @__PURE__ */ react.default.createElement(_pisell_icon_es_Edit05.default, {
		className: "pisell-lowcode__deposit-item-header-right-edit",
		onClick: onEdit
	}))), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__deposit-item-content" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__deposit-item-content-line1" }, _pisell_utils.locales.getText("pisell2.text.deposit-order-no"), " ", orderNumber), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__deposit-item-content-line2" }, createdTime), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement(require_index.default, {
		data: customer,
		coverSize: 40,
		walkInName: "Walk-In"
	}))), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__deposit-item-footer" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__deposit-item-footer-total" }, /* @__PURE__ */ react.default.createElement("div", null, _pisell_utils.locales.getText("pisell2.text.deposit-order-total")), /* @__PURE__ */ react.default.createElement("div", null, totalAmountStr)), rowStatus === "unpaid" && depositPaidAmount > 0 && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__deposit-item-footer-total-deposit" }, /* @__PURE__ */ react.default.createElement("div", null, _pisell_utils.locales.getText("pisell2.text.deposit-deposit-paid"), " ", handlingFee > 0 && /* @__PURE__ */ react.default.createElement("span", null, "(", _pisell_utils.locales.getText("pisell2.text.deposit-deposit-paid-including-surcharge"), " ", (0, _pisell_utils.formatAmount)(handlingFee, 2, amountSymbol), ")")), /* @__PURE__ */ react.default.createElement("div", null, (0, _pisell_utils.formatAmount)(depositPaidAmount, 2, amountSymbol))), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__deposit-item-footer-total-deposit" }, /* @__PURE__ */ react.default.createElement("div", null, _pisell_utils.locales.getText("pisell2.text.deposit-deposit-paid-due"), " "), /* @__PURE__ */ react.default.createElement("div", null, (0, _pisell_utils.formatAmount)(depositUnPaidAmount, 2, amountSymbol)))), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode__deposit-item-footer-action" }, !hideOrderDetail && /* @__PURE__ */ react.default.createElement(antd.Button, {
		block: true,
		size: "large",
		onClick: handleGoOrderDetail
	}, _pisell_utils.locales.getText("pisell2.text.deposit-order-detail")), /* @__PURE__ */ react.default.createElement(antd.Dropdown, {
		menu: {
			items,
			onClick
		},
		placement: "bottom"
	}, /* @__PURE__ */ react.default.createElement(antd.Button, {
		block: true,
		type: "primary",
		size: "large"
	}, _pisell_utils.locales.getText("pisell2.text.deposit-collect-deposit"), " ", /* @__PURE__ */ react.default.createElement(_ant_design_icons.DownOutlined, null))))));
};
//#endregion
exports.default = DepositItem;
