import ClientItem from "../ClientItem/index.js";
import React, { useEffect } from "react";
import { Button, Dropdown } from "antd";
import { formatAmount, locales } from "@pisell/utils";
import { DownOutlined } from "@ant-design/icons";
import Edit05 from "@pisell/icon/es/Edit05";
import "./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: locales.getText("pisell2.text.deposit-item-status-unpaid"),
		paid: locales.getText("pisell2.text.deposit-item-status-paid")
	};
	useEffect(() => {
		document.body.id = "body";
	}, []);
	const items = [{
		key: "send",
		disabled: isPaid || isBookingCancelled,
		label: /* @__PURE__ */ React.createElement("div", null, locales.getText("pisell2.text.send-mail"))
	}, {
		key: "1",
		disabled: isPaid || isBookingCancelled,
		label: /* @__PURE__ */ React.createElement("div", null, 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.createElement("div", { className: "pisell-lowcode__deposit-item" }, /* @__PURE__ */ React.createElement("div", {
		className: "pisell-lowcode__deposit-item-header",
		style: { backgroundColor: statusBgColor[rowStatus] }
	}, /* @__PURE__ */ React.createElement("div", {
		className: "pisell-lowcode__deposit-status",
		style: { backgroundColor: statusTagColor[rowStatus] }
	}, statusText[rowStatus]), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__deposit-item-header-right" }, /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__deposit-item-header-right-amount" }, formatAmount(depositAmount, 2, amountSymbol)), !(isPaid || isBookingCancelled) && /* @__PURE__ */ React.createElement(Edit05, {
		className: "pisell-lowcode__deposit-item-header-right-edit",
		onClick: onEdit
	}))), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__deposit-item-content" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__deposit-item-content-line1" }, locales.getText("pisell2.text.deposit-order-no"), " ", orderNumber), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__deposit-item-content-line2" }, createdTime), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ClientItem, {
		data: customer,
		coverSize: 40,
		walkInName: "Walk-In"
	}))), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__deposit-item-footer" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__deposit-item-footer-total" }, /* @__PURE__ */ React.createElement("div", null, locales.getText("pisell2.text.deposit-order-total")), /* @__PURE__ */ React.createElement("div", null, totalAmountStr)), rowStatus === "unpaid" && depositPaidAmount > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__deposit-item-footer-total-deposit" }, /* @__PURE__ */ React.createElement("div", null, locales.getText("pisell2.text.deposit-deposit-paid"), " ", handlingFee > 0 && /* @__PURE__ */ React.createElement("span", null, "(", locales.getText("pisell2.text.deposit-deposit-paid-including-surcharge"), " ", formatAmount(handlingFee, 2, amountSymbol), ")")), /* @__PURE__ */ React.createElement("div", null, formatAmount(depositPaidAmount, 2, amountSymbol))), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__deposit-item-footer-total-deposit" }, /* @__PURE__ */ React.createElement("div", null, locales.getText("pisell2.text.deposit-deposit-paid-due"), " "), /* @__PURE__ */ React.createElement("div", null, formatAmount(depositUnPaidAmount, 2, amountSymbol)))), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__deposit-item-footer-action" }, !hideOrderDetail && /* @__PURE__ */ React.createElement(Button, {
		block: true,
		size: "large",
		onClick: handleGoOrderDetail
	}, locales.getText("pisell2.text.deposit-order-detail")), /* @__PURE__ */ React.createElement(Dropdown, {
		menu: {
			items,
			onClick
		},
		placement: "bottom"
	}, /* @__PURE__ */ React.createElement(Button, {
		block: true,
		type: "primary",
		size: "large"
	}, locales.getText("pisell2.text.deposit-collect-deposit"), " ", /* @__PURE__ */ React.createElement(DownOutlined, null))))));
};
//#endregion
export { DepositItem as default };
