import { localizationKeys } from "../../localization/localizationKeys.js";
import check_default from "../../icons/check.js";
import plus_default from "../../icons/plus.js";
import { useProtect } from "../../common/Gate.js";
import { getClosestProfileScrollBox } from "../../utils/getClosestProfileScrollBox.js";
import { useSubscriberTypeContext } from "../../contexts/components/SubscriberType.js";
import { normalizeFormatted, usePlansContext } from "../../contexts/components/Plans.js";
import { usePricingTableContext } from "../../contexts/components/PricingTable.js";
import { InternalThemeProvider } from "../../styledSystem/InternalThemeProvider.js";
import { common } from "../../styledSystem/common.js";
import { descriptors } from "../../customizables/elementDescriptors.js";
import { Box, Button, Col, Flex, Heading, Icon, SimpleButton, Span, Text } from "../../customizables/index.js";
import { Tooltip } from "../../elements/Tooltip.js";
import { SubscriptionBadge } from "../Subscriptions/badge.js";
import { Switch } from "../../elements/Switch.js";
import { getPricingFooterState } from "./utils/pricing-footer-state.js";
import * as React$1 from "react";
import { __internal_useOrganizationBase, useClerk, useSession } from "@clerk/shared/react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/components/PricingTable/PricingTableDefault.tsx
function PricingTableDefault({ plans, planPeriod, setPlanPeriod, onSelect, isCompact, props }) {
	return /* @__PURE__ */ jsx(InternalThemeProvider, { children: /* @__PURE__ */ jsx(Box, {
		elementDescriptor: descriptors.pricingTable,
		sx: (t) => ({
			"--grid-min-size": isCompact ? "11.75rem" : "20rem",
			"--grid-max-columns": "infinity",
			"--grid-gap": t.space.$4,
			"--max-column-width": "100% / var(--grid-max-columns, infinity) - var(--grid-gap)",
			"--column-width": "max(var(--max-column-width), min(var(--grid-min-size, 10rem), 100%))",
			display: "grid",
			gridTemplateColumns: "repeat(auto-fit, minmax(var(--column-width), 1fr))",
			gridTemplateRows: "auto 1fr",
			gap: `var(--grid-gap-y, var(--grid-gap, ${t.space.$4})) var(--grid-gap, ${t.space.$4})`,
			alignItems: "stretch",
			width: "100%",
			minWidth: "0"
		}),
		"data-variant": isCompact ? "compact" : "default",
		children: plans?.map((plan) => /* @__PURE__ */ jsx(Card, {
			plan,
			planPeriod,
			setPlanPeriod,
			onSelect,
			props,
			isCompact
		}, plan.id))
	}) });
}
function Card(props) {
	const { plan, planPeriod, setPlanPeriod, onSelect, props: pricingTableProps, isCompact = false } = props;
	const clerk = useClerk();
	const { isSignedIn } = useSession();
	const { mode = "mounted", ctaPosition: ctxCtaPosition } = usePricingTableContext();
	const subscriberType = useSubscriberTypeContext();
	const organization = __internal_useOrganizationBase();
	const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || "bottom";
	const collapseFeatures = pricingTableProps.collapseFeatures || false;
	const { id, slug } = plan;
	const canManageBilling = useProtect((has) => has({ permission: "org:sys_billing:manage" }) || subscriberType === "user");
	const { buttonPropsForPlan, activeOrUpcomingSubscriptionBasedOnPlanPeriod } = usePlansContext();
	const showPlanDetails = (event) => {
		const portalRoot = getClosestProfileScrollBox(mode, event);
		clerk.__internal_openPlanDetails({
			plan,
			initialPlanPeriod: planPeriod,
			portalRoot
		});
	};
	const subscription = React$1.useMemo(() => activeOrUpcomingSubscriptionBasedOnPlanPeriod(plan, planPeriod), [
		plan,
		planPeriod,
		activeOrUpcomingSubscriptionBasedOnPlanPeriod
	]);
	const hasFeatures = plan.features.length > 0;
	const { shouldShowFooter, shouldShowFooterNotice } = getPricingFooterState({
		subscription,
		plan,
		planPeriod,
		for: pricingTableProps.for,
		hasActiveOrganization: !!organization
	});
	return /* @__PURE__ */ jsxs(Box, {
		elementDescriptor: descriptors.pricingTableCard,
		elementId: descriptors.pricingTableCard.setId(slug),
		sx: (t) => ({
			display: "grid",
			gap: 0,
			gridTemplateRows: "subgrid",
			gridRow: "span 5",
			background: common.mutedBackground(t),
			borderWidth: t.borderWidths.$normal,
			borderStyle: t.borderStyles.$solid,
			borderColor: t.colors.$borderAlpha150,
			borderRadius: t.radii.$xl,
			overflow: "hidden",
			textAlign: "left"
		}),
		"data-variant": isCompact ? "compact" : "default",
		children: [/* @__PURE__ */ jsx(CardHeader, {
			plan,
			isCompact,
			planPeriod,
			setPlanPeriod,
			badge: subscription ? /* @__PURE__ */ jsx(SubscriptionBadge, { subscription: subscription.isFreeTrial ? { status: "free_trial" } : subscription }) : void 0
		}), /* @__PURE__ */ jsxs(Box, {
			elementDescriptor: descriptors.pricingTableCardBody,
			sx: {
				display: "grid",
				gridTemplateRows: "subgrid",
				gridRow: "span 2",
				gap: 0
			},
			children: [ctaPosition === "bottom" && !collapseFeatures || ctaPosition === "top" && hasFeatures ? /* @__PURE__ */ jsx(Box, {
				elementDescriptor: descriptors.pricingTableCardFeatures,
				sx: (t) => ({
					display: "flex",
					flexDirection: "column",
					flex: "1",
					padding: isCompact ? t.space.$3 : t.space.$4,
					backgroundColor: hasFeatures ? t.colors.$colorBackground : "transparent",
					borderTopWidth: hasFeatures ? t.borderWidths.$normal : 0,
					borderTopStyle: t.borderStyles.$solid,
					borderTopColor: t.colors.$borderAlpha150
				}),
				"data-variant": isCompact ? "compact" : "default",
				children: /* @__PURE__ */ jsx(CardFeaturesList, {
					plan,
					isCompact,
					showPlanDetails
				})
			}) : null, shouldShowFooter ? /* @__PURE__ */ jsx(Box, {
				elementDescriptor: descriptors.pricingTableCardFooter,
				sx: (t) => ({
					marginTop: "auto",
					padding: isCompact ? t.space.$3 : t.space.$4,
					borderTopWidth: t.borderWidths.$normal,
					borderTopStyle: t.borderStyles.$solid,
					borderTopColor: t.colors.$borderAlpha150,
					order: ctaPosition === "top" ? -1 : void 0
				}),
				children: shouldShowFooterNotice && subscription ? /* @__PURE__ */ jsx(Text, {
					elementDescriptor: descriptors.pricingTableCardFooterNotice,
					variant: isCompact ? "buttonSmall" : "buttonLarge",
					localizationKey: plan.freeTrialEnabled && subscription.isFreeTrial && subscription.periodEnd ? localizationKeys("badge__trialEndsAt", { date: subscription.periodEnd }) : localizationKeys("badge__startsAt", { date: subscription.periodStart }),
					colorScheme: "secondary",
					sx: (t) => ({
						paddingBlock: t.space.$1x5,
						textAlign: "center"
					})
				}) : /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
					sx: { width: "100%" },
					children: /* @__PURE__ */ jsx(Button, {
						elementDescriptor: descriptors.pricingTableCardFooterButton,
						block: true,
						textVariant: isCompact ? "buttonSmall" : "buttonLarge",
						...buttonPropsForPlan({
							plan,
							isCompact,
							selectedPlanPeriod: planPeriod
						}),
						onClick: (event) => {
							onSelect(plan, event);
						}
					})
				}), isSignedIn && !canManageBilling && /* @__PURE__ */ jsx(Tooltip.Content, { text: localizationKeys("organizationProfile.plansPage.alerts.noPermissionsToManageBilling") })] })
			}) : /* @__PURE__ */ jsx(Box, { sx: (t) => ({ backgroundColor: hasFeatures ? t.colors.$colorBackground : "transparent" }) })]
		})]
	}, id);
}
const CardHeader = React$1.forwardRef((props, ref) => {
	const { plan, isCompact, planPeriod, setPlanPeriod, badge } = props;
	const { name, annualMonthlyFee } = plan;
	const planSupportsAnnual = Boolean(annualMonthlyFee);
	const fee = React$1.useMemo(() => {
		if (!planSupportsAnnual) return plan.fee;
		return planPeriod === "annual" ? plan.annualMonthlyFee : plan.fee;
	}, [
		planSupportsAnnual,
		planPeriod,
		plan.fee,
		plan.annualMonthlyFee
	]);
	const feeFormatted = React$1.useMemo(() => {
		return normalizeFormatted(fee.amountFormatted);
	}, [fee.amountFormatted]);
	return /* @__PURE__ */ jsxs(Box, {
		ref,
		elementDescriptor: descriptors.pricingTableCardHeader,
		sx: (t) => ({
			width: "100%",
			padding: isCompact ? t.space.$3 : t.space.$4,
			display: "grid",
			gap: t.space.$1,
			gridRow: "span 3",
			gridTemplateRows: "subgrid"
		}),
		"data-variant": isCompact ? "compact" : "default",
		children: [
			/* @__PURE__ */ jsxs(Box, {
				elementDescriptor: descriptors.pricingTableCardTitleContainer,
				children: [/* @__PURE__ */ jsxs(Box, {
					sx: (t) => ({
						display: "flex",
						justifyContent: "space-between",
						alignItems: "flex-start",
						gap: t.space.$0x25
					}),
					children: [/* @__PURE__ */ jsx(Heading, {
						elementDescriptor: descriptors.pricingTableCardTitle,
						as: "h2",
						textVariant: isCompact ? "h3" : "h2",
						children: name
					}), badge && badge]
				}), !isCompact && plan.description ? /* @__PURE__ */ jsx(Text, {
					elementDescriptor: descriptors.pricingTableCardDescription,
					variant: "subtitle",
					colorScheme: "secondary",
					sx: { justifySelf: "flex-start" },
					children: plan.description
				}) : null]
			}),
			/* @__PURE__ */ jsxs(Flex, {
				elementDescriptor: descriptors.pricingTableCardFeeContainer,
				"data-variant": isCompact ? "compact" : "default",
				align: "center",
				wrap: "wrap",
				sx: (t) => ({
					columnGap: t.space.$1,
					marginTop: t.space.$1
				}),
				children: [/* @__PURE__ */ jsxs(Text, {
					elementDescriptor: descriptors.pricingTableCardFee,
					variant: isCompact ? "h2" : "h1",
					colorScheme: "body",
					children: [fee.currencySymbol, feeFormatted]
				}), !plan.isDefault ? /* @__PURE__ */ jsx(Text, {
					elementDescriptor: descriptors.pricingTableCardFeePeriod,
					variant: "caption",
					colorScheme: "secondary",
					sx: (t) => ({
						textTransform: "lowercase",
						":before": {
							content: "\"/\"",
							marginInlineEnd: t.space.$0x25
						}
					}),
					localizationKey: localizationKeys("billing.month")
				}) : null]
			}),
			planSupportsAnnual && setPlanPeriod ? /* @__PURE__ */ jsx(Box, {
				elementDescriptor: descriptors.pricingTableCardPeriodToggle,
				sx: (t) => ({ marginTop: t.space.$1 }),
				children: /* @__PURE__ */ jsx(Switch, {
					isChecked: planPeriod === "annual",
					onChange: (checked) => setPlanPeriod(checked ? "annual" : "month"),
					label: localizationKeys("billing.billedAnnually")
				})
			}) : /* @__PURE__ */ jsx(Text, {
				elementDescriptor: descriptors.pricingTableCardFeePeriodNotice,
				variant: "caption",
				colorScheme: "secondary",
				localizationKey: plan.isDefault ? localizationKeys("billing.alwaysFree") : localizationKeys("billing.billedMonthlyOnly"),
				sx: (t) => ({
					justifySelf: "flex-start",
					alignSelf: "center",
					marginTop: t.space.$1
				})
			})
		]
	});
});
const CardFeaturesList = React$1.forwardRef((props, ref) => {
	const { plan, isCompact, showPlanDetails } = props;
	const totalFeatures = plan.features.length;
	const hasMoreFeatures = isCompact ? totalFeatures > 3 : totalFeatures > 8;
	return /* @__PURE__ */ jsxs(Box, {
		ref,
		elementDescriptor: descriptors.pricingTableCardFeatures,
		sx: (t) => ({
			display: "grid",
			flex: 1,
			rowGap: isCompact ? t.space.$2 : t.space.$3
		}),
		children: [/* @__PURE__ */ jsx(Col, {
			elementDescriptor: descriptors.pricingTableCardFeaturesList,
			"data-variant": isCompact ? "compact" : "default",
			as: "ul",
			role: "list",
			sx: (t) => ({
				flex: "1",
				rowGap: isCompact ? t.space.$2 : t.space.$3,
				margin: 0,
				padding: 0
			}),
			children: plan.features.slice(0, hasMoreFeatures ? isCompact ? 3 : 8 : totalFeatures).map((feature) => /* @__PURE__ */ jsxs(Box, {
				elementDescriptor: descriptors.pricingTableCardFeaturesListItem,
				elementId: descriptors.pricingTableCardFeaturesListItem.setId(feature.slug),
				as: "li",
				sx: (t) => ({
					display: "flex",
					alignItems: "baseline",
					gap: t.space.$2,
					margin: 0,
					padding: 0
				}),
				children: [/* @__PURE__ */ jsx(Icon, {
					icon: check_default,
					colorScheme: "neutral",
					size: "sm",
					"aria-hidden": true,
					sx: (t) => ({ transform: `translateY(${t.space.$0x25})` })
				}), /* @__PURE__ */ jsx(Span, {
					elementDescriptor: descriptors.pricingTableCardFeaturesListItemContent,
					children: /* @__PURE__ */ jsx(Text, {
						elementDescriptor: descriptors.pricingTableCardFeaturesListItemTitle,
						colorScheme: "body",
						sx: (t) => ({ fontWeight: t.fontWeights.$normal }),
						children: feature.name
					})
				})]
			}, feature.id))
		}), hasMoreFeatures && /* @__PURE__ */ jsxs(SimpleButton, {
			onClick: (event) => showPlanDetails(event),
			variant: "link",
			sx: (t) => ({
				marginBlockStart: "auto",
				paddingBlock: t.space.$1,
				gap: t.space.$1
			}),
			children: [/* @__PURE__ */ jsx(Icon, {
				icon: plus_default,
				colorScheme: "neutral",
				size: "md",
				"aria-hidden": true
			}), /* @__PURE__ */ jsx(Span, { localizationKey: localizationKeys("billing.seeAllFeatures") })]
		})]
	});
});

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