import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _asyncToGenerator } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import TabPane from "../components/tabPane/index.js";
import EmptyBooking from "../components/emptyBooking/index.js";
import Footer from "../components/footer/index.js";
import { Context, Provider } from "./model.js";
import dayjs from "dayjs";
import React, { useContext, useEffect, useState } from "react";
import { Divider, List } from "antd";
import { formatAmount, locales } from "@pisell/utils";
import { CheckCircleFilled, CloseCircleFilled, ExclamationCircleFilled } from "@ant-design/icons";
import "./index.less";
//#region src/components/booking/payments/index.tsx
const paymentStatusMap = {
	paid: {
		text: locales.getText("pisell2.text.paid"),
		icon: /* @__PURE__ */ React.createElement(CheckCircleFilled, { style: {
			color: "#16B364",
			fontSize: 20
		} })
	},
	voided: {
		text: locales.getText("pisell2.text.voided_pay"),
		icon: /* @__PURE__ */ React.createElement(CloseCircleFilled, { style: {
			color: "#F04438",
			fontSize: 20
		} })
	},
	payment_processing: {
		text: locales.getText("pisell2.text.processing_pay"),
		icon: /* @__PURE__ */ React.createElement(ExclamationCircleFilled, { style: {
			color: "#EAAA08",
			fontSize: 20
		} })
	}
};
const PaymentStatusTitle = (props) => {
	const { type, extra } = props;
	return /* @__PURE__ */ React.createElement("div", { className: "payment-list-item-status-title" }, /* @__PURE__ */ React.createElement("span", { className: "payment-list-item-status-title-left" }, paymentStatusMap[type].icon || null, /* @__PURE__ */ React.createElement("span", { className: "payment-list-item-type" }, paymentStatusMap[type].text)), extra);
};
const Payments = Provider((props) => {
	const { globalState } = props;
	const { state, dispatch } = useContext(Context);
	const [loading, setLoading] = useState(false);
	const [paymentList, setPaymentList] = useState([]);
	const [refundAmount, setRefundAmount] = useState();
	const init = () => {
		getPayments();
		getRefundInfo();
	};
	useEffect(() => {
		if (state.bookingDetail) init();
	}, [state.bookingDetail]);
	const getRefundInfo = function() {
		var _ref = _asyncToGenerator(function* () {
			setRefundAmount((yield state.apis.getRefundInfo()).total_refund_amount);
		});
		return function getRefundInfo() {
			return _ref.apply(this, arguments);
		};
	}();
	const getPayments = function() {
		var _ref2 = _asyncToGenerator(function* () {
			setLoading(true);
			const res = yield state.apis.getPaymentList({
				skip: 1,
				num: 100,
				order_id: state.bookingId,
				status: [
					"voided",
					"payment_processing",
					"paid"
				]
			});
			setPaymentList((res === null || res === void 0 ? void 0 : res.list) || []);
			setLoading(false);
		});
		return function getPayments() {
			return _ref2.apply(this, arguments);
		};
	}();
	useEffect(() => {
		document.body.id = "body";
		dispatch({
			type: "setState",
			payload: { setGlobalState: props.setGlobalState }
		});
	}, []);
	useEffect(() => {
		dispatch({
			type: "setState",
			payload: _objectSpread2({}, globalState)
		});
	}, [globalState]);
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TabPane, {
		header: locales.getText("pisell2.text.payments"),
		footer: state.bookingId && /* @__PURE__ */ React.createElement(Footer, {
			state,
			dispatch,
			source: "payment"
		}),
		loading: loading && state.bookingId
	}, /* @__PURE__ */ React.createElement("div", { className: "payment-customer-pay-title" }, locales.getText("pisell2.text.customerpay")), state.bookingId && paymentList.length ? /* @__PURE__ */ React.createElement(List, {
		dataSource: paymentList,
		renderItem: (item) => /* @__PURE__ */ React.createElement(List.Item, null, /* @__PURE__ */ React.createElement("div", { className: "payment-list-item" }, /* @__PURE__ */ React.createElement("div", { className: "payment-list-item-left" }, /* @__PURE__ */ React.createElement("div", {
			className: "payment-record",
			key: item.id
		}, /* @__PURE__ */ React.createElement(PaymentStatusTitle, {
			type: item.status,
			extra: /* @__PURE__ */ React.createElement("span", { className: "payment-list-item-pay-amount" }, formatAmount(item.amount, 2, (state === null || state === void 0 ? void 0 : state.amountSymbol) || "$"))
		}), /* @__PURE__ */ React.createElement("div", { className: "payment-list-item-content" }, /* @__PURE__ */ React.createElement("div", { className: "payment-list-item-pay-methods" }, /* @__PURE__ */ React.createElement("span", { className: "payment-list-item-pay-name" }, item.payment_method_name || "-")), Number(item.service_fee) ? /* @__PURE__ */ React.createElement("div", { className: "payment-list-item-surcharge" }, "(", locales.getText("pisell2.text.surcharge"), " ", formatAmount(item.service_fee, 2, (state === null || state === void 0 ? void 0 : state.amountSymbol) || "$"), ")") : null, /* @__PURE__ */ React.createElement("div", { className: "payment-list-item-date" }, dayjs(item.payment_time || item.created_at).format("HH:mm YYYY/MM/DD"), /* @__PURE__ */ React.createElement("span", { className: "payment-list-item-platform-type" }, item.platform && locales.getText("pisell2.text.platform.type")(item.platform))))))))
	}) : /* @__PURE__ */ React.createElement(EmptyBooking, { description: state.bookingId ? locales.getText("pisell1.text.no-payments") : void 0 }), !!state.bookingId && !!Number(refundAmount) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, { className: "payment-divider" }), /* @__PURE__ */ React.createElement("div", { className: "payment-refund-wrap" }, /* @__PURE__ */ React.createElement("div", { className: "payment-refund-title" }, locales.getText("pisell2.text.refund"), ":"), /* @__PURE__ */ React.createElement("div", { className: "payment-refund-amount" }, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.text.refund-amount")), /* @__PURE__ */ React.createElement("span", null, formatAmount(refundAmount, 2, (state === null || state === void 0 ? void 0 : state.amountSymbol) || "$")))), /* @__PURE__ */ React.createElement(Divider, { className: "payment-divider" }))));
});
//#endregion
export { Payments as default };
