import { useRouter } from "../../router/RouteContext.js";
import { localizationKeys } from "../../localization/localizationKeys.js";
import arrow_right_default from "../../icons/arrow-right.js";
import plus_default from "../../icons/plus.js";
import rotate_left_right_default from "../../icons/rotate-left-right.js";
import { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from "../../contexts/components/SubscriberType.js";
import { useLocalizations } from "../../localization/makeLocalizable.js";
import { descriptors } from "../../customizables/elementDescriptors.js";
import { Box, Icon, SimpleButton, Span, Spinner } from "../../customizables/index.js";
import { Alert } from "../../elements/Alert.js";
import { Header } from "../../elements/Header.js";
import { formatDate } from "../../utils/formatDate.js";
import { Statement } from "./Statement.js";
import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
import { __internal_useStatementQuery } from "@clerk/shared/react/index";

//#region src/components/Statements/StatementPage.tsx
const StatementPage = () => {
	const { params, navigate } = useRouter();
	const subscriberType = useSubscriberTypeContext();
	const localizationRoot = useSubscriberTypeLocalizationRoot();
	const { t, translateError } = useLocalizations();
	const requesterType = subscriberType === "organization" ? "organization" : "user";
	const { data: statement, isLoading, error } = __internal_useStatementQuery({
		statementId: params.statementId,
		for: requesterType,
		enabled: Boolean(params.statementId)
	});
	if (isLoading) return /* @__PURE__ */ jsx(Box, {
		sx: {
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			height: "100%"
		},
		children: /* @__PURE__ */ jsx(Spinner, {
			colorScheme: "primary",
			sx: {
				margin: "auto",
				display: "block"
			},
			elementDescriptor: descriptors.spinner
		})
	});
	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Header.Root, {
		sx: (t$1) => ({
			borderBlockEndWidth: t$1.borderWidths.$normal,
			borderBlockEndStyle: t$1.borderStyles.$solid,
			borderBlockEndColor: t$1.colors.$borderAlpha100,
			marginBlockEnd: t$1.space.$4,
			paddingBlockEnd: t$1.space.$4
		}),
		children: /* @__PURE__ */ jsx(Header.BackLink, {
			onClick: () => void navigate("../../", { searchParams: new URLSearchParams("tab=statements") }),
			children: /* @__PURE__ */ jsx(Header.Title, {
				localizationKey: localizationKeys(`${localizationRoot}.billingPage.statementsSection.title`),
				textVariant: "h2"
			})
		})
	}), !statement ? /* @__PURE__ */ jsx(Box, {
		sx: {
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			height: "100%"
		},
		children: /* @__PURE__ */ jsx(Alert, {
			variant: "danger",
			colorScheme: "danger",
			children: error ? translateError(error.errors[0]) : t(localizationKeys(`${localizationRoot}.billingPage.statementsSection.notFound`))
		})
	}) : /* @__PURE__ */ jsxs(Statement.Root, { children: [
		/* @__PURE__ */ jsx(Statement.Header, {
			title: formatDate(statement.timestamp, "monthyear"),
			id: statement.id,
			status: statement.status
		}),
		/* @__PURE__ */ jsx(Statement.Body, { children: statement.groups.map((group) => /* @__PURE__ */ jsxs(Statement.Section, { children: [/* @__PURE__ */ jsx(Statement.SectionHeader, { text: formatDate(group.timestamp, "long") }), /* @__PURE__ */ jsx(Statement.SectionContent, { children: group.items.map((item) => /* @__PURE__ */ jsxs(Statement.SectionContentItem, { children: [/* @__PURE__ */ jsx(Statement.SectionContentDetailsHeader, {
			title: item.subscriptionItem.plan.name,
			description: `${item.subscriptionItem.amount?.currencySymbol}${item.subscriptionItem.amount?.amountFormatted} / ${item.subscriptionItem.planPeriod === "month" ? t(localizationKeys("billing.month")) : t(localizationKeys("billing.year"))}`,
			secondaryTitle: `${item.amount.currencySymbol}${item.amount.amountFormatted}`
		}), /* @__PURE__ */ jsxs(Statement.SectionContentDetailsList, { children: [/* @__PURE__ */ jsx(Statement.SectionContentDetailsListItem, {
			label: item.chargeType === "recurring" ? localizationKeys(`${localizationRoot}.billingPage.statementsSection.itemCaption__paidForPlan`, {
				plan: item.subscriptionItem.plan.name,
				period: item.subscriptionItem.planPeriod
			}) : localizationKeys(`${localizationRoot}.billingPage.statementsSection.itemCaption__subscribedAndPaidForPlan`, {
				plan: item.subscriptionItem.plan.name,
				period: item.subscriptionItem.planPeriod
			}),
			labelIcon: item.chargeType === "recurring" ? rotate_left_right_default : plus_default,
			value: /* @__PURE__ */ jsxs(SimpleButton, {
				onClick: () => void navigate(`../../payment-attempt/${item.id}`),
				variant: "link",
				colorScheme: "primary",
				textVariant: "buttonSmall",
				sx: (t$1) => ({ gap: t$1.space.$1 }),
				children: [/* @__PURE__ */ jsx(Span, { localizationKey: localizationKeys("billing.viewPayment") }), /* @__PURE__ */ jsx(Icon, {
					icon: arrow_right_default,
					size: "sm",
					"aria-hidden": true
				})]
			})
		}), item.subscriptionItem.credit && item.subscriptionItem.credit.amount.amount > 0 ? /* @__PURE__ */ jsx(Statement.SectionContentDetailsListItem, {
			label: localizationKeys(`${localizationRoot}.billingPage.statementsSection.itemCaption__proratedCredit`),
			value: `(${item.subscriptionItem.credit.amount.currencySymbol}${item.subscriptionItem.credit.amount.amountFormatted})`
		}) : null] })] }, item.id)) })] }, group.timestamp.toISOString())) }),
		/* @__PURE__ */ jsx(Statement.Footer, {
			label: localizationKeys(`${localizationRoot}.billingPage.statementsSection.totalPaid`),
			value: `${statement.totals.grandTotal.currencySymbol}${statement.totals.grandTotal.amountFormatted}`
		})
	] })] });
};

//#endregion
export { StatementPage };
//# sourceMappingURL=StatementPage.js.map