import { getActiveLogs, getAssetList } from "../../serve.js";
import dayjs from "dayjs";
import React, { useCallback, useMemo } from "react";
import { locales } from "@pisell/utils";
import { Button, PisellEmpty, PisellModal, PisellStatisticList, Skeleton, Timeline, usePisellConfig } from "@pisell/materials";
import { useRequest } from "ahooks";
import timezonePlugin from "dayjs/plugin/timezone";
import utcPlugin from "dayjs/plugin/utc";
import "./index.less";
//#region src/plus/walletPassGallery/components/timelineSection/index.tsx
dayjs.extend(timezonePlugin);
dayjs.extend(utcPlugin);
const stateTimeUnix = 1723255863;
const TimelineSection = (props) => {
	const { code, tag, timezone, apiPrefix, isTerminalEnv, interaction } = props;
	const { symbol = "$" } = usePisellConfig();
	const [isShowtimeLineDetail, setIsShowtimeLineDetail] = React.useState(false);
	const [isSpending, setIsSpending] = React.useState(true);
	const [timeLineDetail, setTimeLineDetail] = React.useState(null);
	const assetActionEnum = useMemo(() => {
		return {
			recharge: tag === "point_card" ? locales.getText("wallet-pass-gallery.pointsEarned") : locales.getText("wallet-pass-gallery.recharge"),
			order_expend: tag === "point_card" ? locales.getText("wallet-pass-gallery.pointsRedeemed") : locales.getText("wallet-pass-gallery.spending"),
			order_refund: locales.getText("wallet-pass-gallery.refund"),
			expire: locales.getText("wallet-pass-gallery.expire")
		};
	}, [tag]);
	const formatCurrencyAmount = useCallback((amount = "", isNegative = false) => {
		if (!amount) return "";
		if (tag === "good_pass") return locales.getText("wallet-pass-gallery.goodPass.usedCredit")(parseInt(amount));
		const absAmount = amount.startsWith("-") ? amount.substring(1) : amount;
		const showSymbol = !["point_card", "good_pass"].includes(tag);
		return isNegative ? `-${showSymbol ? symbol : ""}${absAmount}` : `${showSymbol ? symbol : ""}${amount}`;
	}, [symbol, tag]);
	const timeTreeNode = useCallback((data) => {
		const { action = "", created_at = "", amount = "", currency_symbol = "" } = data;
		return /* @__PURE__ */ React.createElement("div", { className: "pisell-wallet-pass-gallery_timeline-node" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-wallet-pass-gallery_timeline-node-left" }, /* @__PURE__ */ React.createElement("p", { className: "pisell-wallet-pass-gallery_timeline-node-action" }, action ? assetActionEnum[action] : ""), created_at && /* @__PURE__ */ React.createElement("p", { className: "pisell-wallet-pass-gallery_timeline-node-time" }, created_at, (action === "recharge" || action === "order_expend") && /* @__PURE__ */ React.createElement("button", {
			type: "button",
			className: "pisell-wallet-pass-gallery_timeline-node-detail-link",
			onClick: () => {
				setIsShowtimeLineDetail(true);
				setIsSpending(action === "order_expend");
				setTimeLineDetail(data);
			},
			style: {
				background: "transparent",
				border: "none",
				padding: 0
			}
		}, locales.getText("wallet-pass-gallery.viewDetails")))), /* @__PURE__ */ React.createElement("div", { className: `pisell-wallet-pass-gallery_timeline-node-amount${action === "recharge" ? " pisell-wallet-pass-gallery_timeline-node-amount-positive" : ""}${action === "order_expend" ? " pisell-wallet-pass-gallery_timeline-node-amount-negative" : ""}` }, amount && currency_symbol ? formatCurrencyAmount(amount, action === "order_expend") : ""));
	}, [assetActionEnum, formatCurrencyAmount]);
	const assetListReq = useRequest(() => {
		if (apiPrefix === "/shop") return getActiveLogs({ filter_card_id: code });
		return getAssetList({
			num: "99",
			skip: "1",
			card_id: code,
			sourceType: tag,
			tag,
			business_object: "customer"
		});
	}, {
		ready: !!code,
		refreshDeps: [code, tag]
	});
	const timelineItems = useMemo(() => {
		var _assetListReq$data;
		const list = ((_assetListReq$data = assetListReq.data) === null || _assetListReq$data === void 0 ? void 0 : _assetListReq$data.list) || [];
		if (!Array.isArray(list) || list.length === 0) return [];
		return list.filter((item) => !!assetActionEnum[item.action || ""]).filter((item) => {
			const itemUnix = dayjs.tz((item === null || item === void 0 ? void 0 : item.created_at) || "", timezone).unix();
			if ((item === null || item === void 0 ? void 0 : item.action) === "order_expend" && itemUnix < stateTimeUnix) return false;
			if ((item === null || item === void 0 ? void 0 : item.tag) === "point_card" && itemUnix < stateTimeUnix) return false;
			return true;
		}).filter((it) => !(it.tag === "point_card" && (it.amount === "0" || parseFloat(it.amount || "0") === 0))).map((item) => ({ children: assetActionEnum[(item === null || item === void 0 ? void 0 : item.action) || ""] ? timeTreeNode(item) : null }));
	}, [
		assetListReq.data,
		assetActionEnum,
		timeTreeNode,
		timezone,
		stateTimeUnix
	]);
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "pisell-wallet-pass-gallery_timeline-subtitle" }, locales.getText("wallet-pass-gallery.activelog")), assetListReq.loading ? /* @__PURE__ */ React.createElement("div", { className: "pisell-wallet-pass-gallery_timeline-loading" }, /* @__PURE__ */ React.createElement(Skeleton, {
		active: true,
		paragraph: { rows: 6 },
		round: true
	})) : timelineItems.length > 0 ? /* @__PURE__ */ React.createElement(Timeline, {
		items: timelineItems,
		className: "pisell-wallet-pass-gallery_timeline-list"
	}) : /* @__PURE__ */ React.createElement("div", { className: "pisell-wallet-pass-gallery_timeline-empty" }, /* @__PURE__ */ React.createElement(PisellEmpty, null)), /* @__PURE__ */ React.createElement(PisellModal, {
		platform: "pc",
		mobileModalHeight: "auto",
		cancelVisible: false,
		destroyOnClose: true,
		onCancel: () => setIsShowtimeLineDetail(false),
		title: isSpending ? locales.getText("wallet-pass-gallery.spendingDetails") : locales.getText("wallet-pass-gallery.rechargeDetails"),
		open: isShowtimeLineDetail,
		footer: [/* @__PURE__ */ React.createElement(Button, {
			type: "primary",
			block: true,
			size: "large",
			onClick: () => setIsShowtimeLineDetail(false)
		}, locales.getText("wallet-pass-gallery.done"))]
	}, /* @__PURE__ */ React.createElement(PisellStatisticList, {
		data: [
			{
				label: locales.getText("wallet-pass-gallery.date"),
				value: (timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.created_at) || ""
			},
			{
				label: isSpending ? locales.getText("wallet-pass-gallery.spending") : locales.getText("wallet-pass-gallery.recharge"),
				value: formatCurrencyAmount((timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.amount) || "", isSpending)
			},
			{
				label: locales.getText("wallet-pass-gallery.viewOrder"),
				value: timeLineDetail && (timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.resource_code) ? `#${timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.resource_code}` : (timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.transaction_id) ? `#${timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.transaction_id}` : "",
				isLink: !!(timeLineDetail && (timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.resource_id)),
				onClick: () => {
					if (isTerminalEnv) {
						var _interaction$utils, _interaction$utils$po;
						return interaction === null || interaction === void 0 || (_interaction$utils = interaction.utils) === null || _interaction$utils === void 0 || (_interaction$utils$po = _interaction$utils.postMessageToApp) === null || _interaction$utils$po === void 0 ? void 0 : _interaction$utils$po.call(_interaction$utils, {
							module: "booking",
							key: "view_order",
							data: { order_id: timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.resource_id },
							origin: "/booking"
						});
					}
					const link = apiPrefix === "/shop" ? `/admin/order/orders/detail?id=${timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.resource_id}` : `/order/details?id=${timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.resource_id}`;
					location.replace(link);
				},
				link: timeLineDetail && (timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.resource_id) ? true : void 0
			}
		],
		labelColor: "#101828",
		valueColor: "#101828",
		backgroundColors: ["#fff"],
		isHasBorder: false
	})));
};
//#endregion
export { TimelineSection as default };
