import { useCheckoutContext } from "../../contexts/components/Checkout.js";
import { localizationKeys } from "../../localization/localizationKeys.js";
import chevron_up_down_default from "../../icons/chevron-up-down.js";
import information_circle_default from "../../icons/information-circle.js";
import { getSeatUnitPrice } from "../../utils/billingPlanSeats.js";
import { usePaymentMethods } from "../../contexts/components/Plans.js";
import { descriptors } from "../../customizables/elementDescriptors.js";
import { useCardState, withCardStateProvider } from "../../elements/contexts/index.js";
import { Box, Button, Col, Flex, Form, Spinner, Text } from "../../customizables/index.js";
import { Card } from "../../elements/Card/index.js";
import { handleError } from "../../utils/errorHandler.js";
import { Select, SelectButton, SelectOptionList } from "../../elements/Select.js";
import { Drawer } from "../../elements/Drawer.js";
import { LineItems } from "../../elements/LineItems.js";
import { Tooltip } from "../../elements/Tooltip.js";
import { DevOnly } from "../../common/DevOnly.js";
import { FormButton, Root } from "../PaymentMethods/AddPaymentMethod.js";
import { PaymentMethodRow } from "../PaymentMethods/PaymentMethodRow.js";
import { SubscriptionBadge } from "../Subscriptions/badge.js";
import { useMemo, useState } from "react";
import { __experimental_useCheckout } from "@clerk/shared/react";
import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/components/Checkout/CheckoutForm.tsx
const capitalize = (name) => name[0].toUpperCase() + name.slice(1);
const HIDDEN_INPUT_NAME = "payment_method_id";
const CheckoutForm = withCardStateProvider(() => {
	const { checkout } = __experimental_useCheckout();
	const { plan, totals, isImmediatePlanChange, planPeriod, freeTrialEndsAt } = checkout;
	if (!plan) return null;
	const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;
	const showAccountCredits = !!totals.credits?.payer?.appliedAmount && totals.credits.payer.appliedAmount.amount > 0;
	const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0;
	const showDowngradeInfo = !isImmediatePlanChange;
	const fee = planPeriod === "month" ? plan.fee : plan.annualMonthlyFee;
	const descriptionElements = [];
	if (planPeriod === "annual") descriptionElements.push(localizationKeys("billing.billedAnnually"));
	const seatUnitPrice = getSeatUnitPrice(plan);
	if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) descriptionElements.push(seatUnitPrice.tiers[0].endsAfterBlock ? localizationKeys("billing.pricingTable.seatCost.upToSeats", { endsAfterBlock: seatUnitPrice.tiers[0].endsAfterBlock }) : localizationKeys("billing.pricingTable.seatCost.unlimitedSeats"));
	return /* @__PURE__ */ jsxs(Drawer.Body, { children: [
		/* @__PURE__ */ jsx(Box, {
			elementDescriptor: descriptors.checkoutFormLineItemsRoot,
			sx: (t) => ({
				padding: t.space.$4,
				borderBottomWidth: t.borderWidths.$normal,
				borderBottomStyle: t.borderStyles.$solid,
				borderBottomColor: t.colors.$borderAlpha100
			}),
			children: /* @__PURE__ */ jsxs(LineItems.Root, { children: [
				/* @__PURE__ */ jsxs(LineItems.Group, { children: [/* @__PURE__ */ jsx(LineItems.Title, {
					title: plan.name,
					description: descriptionElements,
					badge: plan.freeTrialEnabled && freeTrialEndsAt ? /* @__PURE__ */ jsx(SubscriptionBadge, { subscription: { status: "free_trial" } }) : null
				}), /* @__PURE__ */ jsx(LineItems.Description, {
					prefix: planPeriod === "annual" ? "x12" : void 0,
					text: `${fee.currencySymbol}${fee.amountFormatted}`,
					suffix: localizationKeys("billing.checkout.perMonth")
				})] }),
				/* @__PURE__ */ jsxs(LineItems.Group, {
					borderTop: true,
					variant: "tertiary",
					children: [/* @__PURE__ */ jsx(LineItems.Title, { title: localizationKeys("billing.subtotal") }), /* @__PURE__ */ jsx(LineItems.Description, { text: `${totals.subtotal.currencySymbol}${totals.subtotal.amountFormatted}` })]
				}),
				showProratedCredit && /* @__PURE__ */ jsxs(LineItems.Group, {
					variant: "tertiary",
					children: [/* @__PURE__ */ jsx(LineItems.Title, { title: localizationKeys("billing.creditRemainder") }), /* @__PURE__ */ jsx(LineItems.Description, { text: `- ${totals.credits?.proration?.amount.currencySymbol}${totals.credits?.proration?.amount.amountFormatted}` })]
				}),
				showAccountCredits && /* @__PURE__ */ jsxs(LineItems.Group, {
					variant: "tertiary",
					children: [/* @__PURE__ */ jsx(LineItems.Title, { title: localizationKeys("billing.payerCreditRemainder") }), /* @__PURE__ */ jsx(LineItems.Description, { text: `- ${totals.credits?.payer?.appliedAmount?.currencySymbol}${totals.credits?.payer?.appliedAmount?.amountFormatted}` })]
				}),
				showPastDue && /* @__PURE__ */ jsxs(LineItems.Group, {
					variant: "tertiary",
					children: [/* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(LineItems.Title, {
						title: localizationKeys("billing.pastDue"),
						icon: information_circle_default
					}) }), /* @__PURE__ */ jsx(Tooltip.Content, { text: localizationKeys("billing.checkout.pastDueNotice") })] }), /* @__PURE__ */ jsx(LineItems.Description, { text: `${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}` })]
				}),
				!!freeTrialEndsAt && !!plan.freeTrialDays && totals.totalDueAfterFreeTrial && /* @__PURE__ */ jsxs(LineItems.Group, {
					variant: "tertiary",
					children: [/* @__PURE__ */ jsx(LineItems.Title, { title: localizationKeys("billing.checkout.totalDueAfterTrial", { days: plan.freeTrialDays }) }), /* @__PURE__ */ jsx(LineItems.Description, { text: `${totals.totalDueAfterFreeTrial.currencySymbol}${totals.totalDueAfterFreeTrial.amountFormatted}` })]
				}),
				/* @__PURE__ */ jsxs(LineItems.Group, {
					borderTop: true,
					children: [/* @__PURE__ */ jsx(LineItems.Title, { title: localizationKeys("billing.totalDueToday") }), /* @__PURE__ */ jsx(LineItems.Description, { text: `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}` })]
				})
			] })
		}),
		showDowngradeInfo && /* @__PURE__ */ jsx(Box, {
			elementDescriptor: descriptors.checkoutFormLineItemsRoot,
			sx: (t) => ({
				paddingBlockStart: t.space.$4,
				paddingInline: t.space.$4
			}),
			children: /* @__PURE__ */ jsx(Text, {
				localizationKey: localizationKeys("billing.checkout.downgradeNotice"),
				variant: "caption",
				colorScheme: "secondary"
			})
		}),
		/* @__PURE__ */ jsx(CheckoutFormElements, {})
	] });
});
const useCheckoutMutations = () => {
	const { onSubscriptionComplete } = useCheckoutContext();
	const { checkout } = __experimental_useCheckout();
	const card = useCardState();
	if (checkout.status !== "needs_confirmation") throw new Error("Checkout not found");
	const confirmCheckout = async (params) => {
		card.setLoading();
		card.setError(void 0);
		const { error } = await checkout.confirm(params);
		if (error) handleError(error, [], card.setError);
		else onSubscriptionComplete?.();
		card.setIdle();
	};
	const payWithExistingPaymentMethod = (e) => {
		e.preventDefault();
		return confirmCheckout({ paymentMethodId: new FormData(e.currentTarget).get(HIDDEN_INPUT_NAME) });
	};
	const payWithoutPaymentMethod = (e) => {
		e.preventDefault();
		return confirmCheckout({});
	};
	const addPaymentMethodAndPay = (ctx) => confirmCheckout(ctx);
	const payWithTestCard = () => confirmCheckout({
		gateway: "stripe",
		useTestCard: true
	});
	return {
		payWithExistingPaymentMethod,
		addPaymentMethodAndPay,
		payWithTestCard,
		payWithoutPaymentMethod
	};
};
const CheckoutFormElements = () => {
	const { checkout } = __experimental_useCheckout();
	const { plan } = checkout;
	const { isLoading } = usePaymentMethods();
	if (!plan) return null;
	if (isLoading) return /* @__PURE__ */ jsx(Spinner, { sx: { margin: "auto" } });
	return /* @__PURE__ */ jsx(CheckoutFormElementsInternal, {});
};
const CheckoutFormElementsInternal = () => {
	const { checkout } = __experimental_useCheckout();
	const { plan, isImmediatePlanChange, needsPaymentMethod } = checkout;
	const { data: paymentMethods } = usePaymentMethods();
	const [paymentMethodSource, setPaymentMethodSource] = useState(() => (paymentMethods.length, "existing"));
	if (!plan) return null;
	return /* @__PURE__ */ jsxs(Col, {
		elementDescriptor: descriptors.checkoutFormElementsRoot,
		gap: 4,
		sx: (t) => ({ padding: t.space.$4 }),
		children: [null, !needsPaymentMethod ? /* @__PURE__ */ jsx(FreeTrialButton, {}) : paymentMethodSource === "existing" ? /* @__PURE__ */ jsx(ExistingPaymentMethodForm, { paymentMethods }) : false]
	});
};
const PayWithTestPaymentMethod = () => {
	const { isLoading } = useCardState();
	const { payWithTestCard } = useCheckoutMutations();
	return /* @__PURE__ */ jsxs(Box, {
		sx: (t) => ({
			background: t.colors.$neutralAlpha50,
			padding: t.space.$2x5,
			borderRadius: t.radii.$md,
			borderWidth: t.borderWidths.$normal,
			borderStyle: t.borderStyles.$solid,
			borderColor: t.colors.$borderAlpha100,
			display: "flex",
			flexDirection: "column",
			rowGap: t.space.$2,
			position: "relative"
		}),
		children: [/* @__PURE__ */ jsx(Box, { sx: (t) => ({
			position: "absolute",
			inset: 0,
			background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`,
			maskImage: `linear-gradient(transparent 20%, black)`,
			pointerEvents: "none"
		}) }), /* @__PURE__ */ jsxs(Flex, {
			sx: (t) => ({
				alignItems: "center",
				justifyContent: "center",
				flexDirection: "column",
				rowGap: t.space.$2
			}),
			children: [/* @__PURE__ */ jsx(Text, {
				sx: (t) => ({
					color: t.colors.$warning500,
					fontWeight: t.fontWeights.$semibold
				}),
				localizationKey: localizationKeys("billing.paymentMethod.dev.developmentMode")
			}), /* @__PURE__ */ jsx(Button, {
				type: "button",
				block: true,
				variant: "bordered",
				localizationKey: localizationKeys("userProfile.billingPage.paymentMethodsSection.payWithTestCardButton"),
				colorScheme: "secondary",
				isLoading,
				onClick: payWithTestCard
			})]
		})]
	});
};
const useSubmitLabel = () => {
	const { checkout } = __experimental_useCheckout();
	const { status, freeTrialEndsAt, totals } = checkout;
	if (status === "needs_initialization") throw new Error("Clerk: Invalid state");
	if (freeTrialEndsAt) return localizationKeys("billing.startFreeTrial");
	if (totals.totalDueNow.amount > 0) return localizationKeys("billing.pay", { amount: `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}` });
	return localizationKeys("billing.subscribe");
};
const FreeTrialButton = withCardStateProvider(() => {
	const { for: _for } = useCheckoutContext();
	const { payWithoutPaymentMethod } = useCheckoutMutations();
	const card = useCardState();
	return /* @__PURE__ */ jsxs(Form, {
		onSubmit: payWithoutPaymentMethod,
		sx: formProps,
		children: [/* @__PURE__ */ jsx(Card.Alert, { children: card.error }), /* @__PURE__ */ jsx(CheckoutSubmitButton, {})]
	});
});
withCardStateProvider(() => {
	const { addPaymentMethodAndPay } = useCheckoutMutations();
	const submitLabel = useSubmitLabel();
	const { checkout } = __experimental_useCheckout();
	return /* @__PURE__ */ jsxs(Root, {
		onSuccess: addPaymentMethodAndPay,
		checkout,
		children: [/* @__PURE__ */ jsx(DevOnly, { children: /* @__PURE__ */ jsx(PayWithTestPaymentMethod, {}) }), /* @__PURE__ */ jsx(FormButton, { text: submitLabel })]
	});
});
const CheckoutSubmitButton = (props) => {
	const card = useCardState();
	const submitLabel = useSubmitLabel();
	return /* @__PURE__ */ jsx(Button, {
		type: "submit",
		colorScheme: "primary",
		size: "sm",
		textVariant: "buttonLarge",
		sx: { width: "100%" },
		isLoading: card.isLoading,
		localizationKey: submitLabel,
		...props
	});
};
const formProps = (t) => ({
	display: "flex",
	flexDirection: "column",
	rowGap: t.space.$4
});
const ExistingPaymentMethodForm = withCardStateProvider(({ paymentMethods }) => {
	const { checkout } = __experimental_useCheckout();
	const { paymentMethod, isImmediatePlanChange, needsPaymentMethod } = checkout;
	const { payWithExistingPaymentMethod } = useCheckoutMutations();
	const card = useCardState();
	const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(paymentMethod || paymentMethods.find((p) => p.isDefault));
	const options = useMemo(() => {
		return paymentMethods.map((method) => {
			const label = method.paymentType !== "card" ? method.paymentType ? `${capitalize(method.paymentType)}` : "–" : method.cardType ? `${capitalize(method.cardType)} ⋯ ${method.last4}` : "–";
			return {
				value: method.id,
				label
			};
		});
	}, [paymentMethods]);
	return /* @__PURE__ */ jsxs(Form, {
		onSubmit: payWithExistingPaymentMethod,
		sx: formProps,
		children: [
			isImmediatePlanChange && needsPaymentMethod ? /* @__PURE__ */ jsxs(Select, {
				elementId: "paymentMethod",
				options,
				value: selectedPaymentMethod?.id || null,
				onChange: (option) => {
					setSelectedPaymentMethod(paymentMethods.find((source) => source.id === option.value));
				},
				portal: true,
				children: [
					/* @__PURE__ */ jsx("input", {
						name: HIDDEN_INPUT_NAME,
						type: "hidden",
						value: selectedPaymentMethod?.id
					}),
					/* @__PURE__ */ jsx(SelectButton, {
						icon: chevron_up_down_default,
						sx: (t) => ({
							justifyContent: "space-between",
							backgroundColor: t.colors.$colorBackground
						}),
						children: selectedPaymentMethod && /* @__PURE__ */ jsx(PaymentMethodRow, { paymentMethod: selectedPaymentMethod })
					}),
					/* @__PURE__ */ jsx(SelectOptionList, { sx: (t) => ({
						paddingBlock: t.space.$1,
						color: t.colors.$colorForeground
					}) })
				]
			}) : /* @__PURE__ */ jsx("input", {
				name: HIDDEN_INPUT_NAME,
				type: "hidden",
				value: selectedPaymentMethod?.id
			}),
			/* @__PURE__ */ jsx(Card.Alert, { children: card.error }),
			/* @__PURE__ */ jsx(CheckoutSubmitButton, {})
		]
	});
});

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