import dayjs from "dayjs";
import React, { useMemo } from "react";
import { locales } from "@pisell/utils";
import classNames from "classnames";
import "./index.less";
//#region src/plus/saleDetail/components/SaleOverview/index.tsx
const PAYMENT_STATUS_COLOR_MAP = {
	unpaid: "#B2DDFF",
	payment_processing: "#FEDF89",
	payment_pending: "#FEDF89",
	authorized: "#ABEFC6",
	paid: "#ABEFC6",
	refunded: "#FECDCA",
	partially_refunded: "#FCCEEE",
	voided: "#D0D5DD"
};
const ORDER_STATUS_COLOR_MAP = {
	open: {
		borderColor: "#1570EF",
		textColor: "#1570EF"
	},
	completed: {
		borderColor: "#079455",
		textColor: "#079455"
	},
	cancelled: {
		borderColor: "#D92D20",
		textColor: "#D92D20"
	}
};
function getPaymentStatusColor(status) {
	const key = status === null || status === void 0 ? void 0 : status.toLowerCase();
	return key && PAYMENT_STATUS_COLOR_MAP[key] || "#D0D5DD";
}
function getOrderStatusColor(status) {
	const key = status === null || status === void 0 ? void 0 : status.toLowerCase();
	return key && ORDER_STATUS_COLOR_MAP[key] || ORDER_STATUS_COLOR_MAP.open;
}
function formatDateTime(value) {
	if (!value) return "-";
	const date = dayjs(value);
	return date.isValid() ? date.format("DD/MM/YYYY HH:mm") : value;
}
function SaleOverview({ dataSource, className }) {
	const saleInfo = useMemo(() => {
		const { tempOrder } = dataSource.sales;
		return {
			orderNumber: tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.shop_full_order_number,
			paymentStatus: (tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.payment_status) || "",
			status: (tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.status) || "",
			createdAt: tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.created_at,
			updatedAt: tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.updated_at
		};
	}, [dataSource]);
	const paymentStatusColor = useMemo(() => getPaymentStatusColor(saleInfo.paymentStatus), [saleInfo.paymentStatus]);
	const orderStatusColor = useMemo(() => getOrderStatusColor(saleInfo.status), [saleInfo.status]);
	const paymentStatusMap = useMemo(() => ({
		authorized: locales.getText("pisell2.sale-detail.paymentStatus.authorized"),
		paid: locales.getText("pisell2.sale-detail.paymentStatus.paid"),
		partially_paid: locales.getText("pisell2.sale-detail.paymentStatus.partially_paid"),
		partially_refunded: locales.getText("pisell2.sale-detail.paymentStatus.partially_refunded"),
		payment_pending: locales.getText("pisell2.sale-detail.paymentStatus.payment_pending"),
		refunded: locales.getText("pisell2.sale-detail.paymentStatus.refunded"),
		unpaid: locales.getText("pisell2.sale-detail.paymentStatus.unpaid"),
		voided: locales.getText("pisell2.sale-detail.paymentStatus.voided"),
		payment_processing: locales.getText("pisell2.sale-detail.paymentStatus.payment_processing")
	}), []);
	const orderStatusMap = useMemo(() => ({
		open: locales.getText("pisell2.sale-detail.orderStatus.open"),
		completed: locales.getText("pisell2.sale-detail.orderStatus.completed"),
		cancelled: locales.getText("pisell2.sale-detail.orderStatus.cancelled")
	}), []);
	if (!saleInfo.orderNumber) return null;
	return /* @__PURE__ */ React.createElement("header", { className: classNames("pisell-sale-detail-sale-overview", className) }, /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-sale-overview__main" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-sale-overview__order-number" }, saleInfo.orderNumber), /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-sale-overview__meta" }, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.sale-detail.placed-at"), " ·", " ", formatDateTime(saleInfo.createdAt)))), /* @__PURE__ */ React.createElement("div", { className: "pisell-sale-detail-sale-overview__status" }, /* @__PURE__ */ React.createElement("span", {
		className: "pisell-sale-detail-sale-overview__status-badge pisell-sale-detail-sale-overview__status-badge--payment",
		style: { "--pisell-sale-detail-overview-payment-color": paymentStatusColor }
	}, paymentStatusMap[saleInfo.paymentStatus] || saleInfo.paymentStatus), /* @__PURE__ */ React.createElement("span", {
		className: "pisell-sale-detail-sale-overview__status-badge pisell-sale-detail-sale-overview__status-badge--order",
		style: {
			"--pisell-sale-detail-overview-order-border-color": orderStatusColor.borderColor,
			"--pisell-sale-detail-overview-order-text-color": orderStatusColor.textColor
		}
	}, orderStatusMap[saleInfo.status] || saleInfo.status)));
}
//#endregion
export { SaleOverview };
