import { vt as __exportAll } from "./PortalTenantClientProvider-BmRtQAbi.mjs";
import { n as useWidgetInteraction } from "./WidgetInteractionContext-BWH7njU7.mjs";
import { f as getGapField, i as getBorderColorField, l as getColorField, m as getPaddingField, n as borderWidthClasses, o as getBorderRadiusField, p as getHeightField, r as gapValues, s as getBorderWidthField, t as borderColorClasses, u as getFontSizeField } from "./registries-59Barbhg.mjs";
import { n as getMediaPropsFromShareable, t as MediaRenderer } from "./MediaRenderer-Db1KsIza.mjs";
import { useRef } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { ChevronLeft, ChevronRight } from "lucide-react";
//#region ../widgets/src/ui/scroll-arrows.tsx
function ScrollArrows({ onPrevious, onNext }) {
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
		type: "button",
		className: "bg-foreground text-background flex size-6 items-center justify-center rounded-2xl opacity-70 transition-colors hover:opacity-50 disabled:opacity-30",
		onClick: onPrevious,
		"aria-label": "Previous slide",
		children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
	}), /* @__PURE__ */ jsx("button", {
		type: "button",
		className: "bg-foreground text-background flex size-6 items-center justify-center rounded-2xl opacity-70 transition-colors hover:opacity-50 disabled:opacity-30",
		onClick: onNext,
		"aria-label": "Next slide",
		children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
	})] });
}
//#endregion
//#region ../widgets/src/widgets/NestedWidget.tsx
var NestedWidget_exports = /* @__PURE__ */ __exportAll({
	NestedWidget: () => NestedWidget,
	nestedWidgetPropertySchema: () => nestedWidgetPropertySchema
});
const DEFAULT_SHAREABLES = [];
function NestedWidget({ resource, titleEnabled = true, titleText = "Featured Collection", shareables = DEFAULT_SHAREABLES, gap = "md", padding = 4, borderRadius = "md", borderWidth = "none", borderColor = "muted", primaryMediaHeight = "400px", titleFontSize = "xl", titleColor = "background", titleAlignment = {
	horizontal: "left",
	vertical: "bottom"
}, nestedTextColor = "foreground", background = {
	type: "solid",
	color: "background"
}, overlayEnabled = true, overlayType = "gradient", overlayIntensity = 50, className, ...props }) {
	const scrollContainerRef = useRef(null);
	const scrollByAmount = (direction) => {
		const container = scrollContainerRef.current;
		if (!container) return;
		const computedGap = parseFloat(getComputedStyle(container).gap) || 0;
		const scrollAmount = (container.firstElementChild?.offsetWidth ?? 0) + computedGap;
		container.scrollTo({
			left: container.scrollLeft + (direction === "next" ? scrollAmount : -scrollAmount),
			behavior: "smooth"
		});
	};
	const primaryMediaRadius = borderRadius === "full" ? "2xl" : borderRadius;
	const { onItemClick } = useWidgetInteraction();
	const hasNestedMedia = shareables.length > 0;
	const titleAlignmentClasses = {
		left: "text-left",
		center: "text-center",
		right: "text-right"
	};
	const backgroundColor = background.color || "background";
	const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
	return /* @__PURE__ */ jsxs("div", {
		className: `@container flex w-full overflow-hidden p-${padding} rounded-${borderRadius} ${borderWidthClasses[borderWidth]} ${borderWidth !== "none" ? borderColorClasses[borderColor] : ""} bg-${backgroundColor} ${className}`,
		...props,
		style: {
			height: primaryMediaHeight,
			backgroundImage
		},
		children: [/* @__PURE__ */ jsxs("div", {
			className: `relative @md:flex-none`,
			style: { width: primaryMediaHeight },
			children: [/* @__PURE__ */ jsxs("div", {
				className: `overflow-hidden rounded-${primaryMediaRadius} absolute inset-0`,
				children: [/* @__PURE__ */ jsx(MediaRenderer, {
					...resource ? getMediaPropsFromShareable(resource) : {},
					autoplay: true,
					loop: true,
					muted: true
				}), overlayEnabled && /* @__PURE__ */ jsx("div", {
					className: `pointer-events-none absolute inset-0 z-10 ${overlayType === "gradient" ? "bg-gradient-to-t from-black to-transparent" : "bg-black"}`,
					style: { opacity: (Number(String(overlayIntensity).replace("%", "")) || 50) / 100 }
				})]
			}), (titleEnabled && titleText || hasNestedMedia) && /* @__PURE__ */ jsxs("div", {
				className: `absolute z-20 w-full ${titleAlignmentClasses[titleAlignment?.horizontal ?? "left"]} p-${padding} ${titleAlignment.vertical === "top" ? `top-0 pt-${padding}` : titleAlignment.vertical === "center" ? "top-1/2 -translate-y-1/2" : `bottom-0 pb-${padding}`}`,
				children: [titleEnabled && titleText && /* @__PURE__ */ jsx("h2", {
					className: `font-header leading-tight font-bold text-${titleColor} text-${titleFontSize === "md" ? "base" : titleFontSize}`,
					children: titleText
				}), hasNestedMedia && /* @__PURE__ */ jsx("div", {
					className: `pt-${padding} @md:hidden`,
					children: /* @__PURE__ */ jsx("div", {
						className: `flex overflow-x-auto gap-${gapValues[gap]} bg-transparent`,
						children: shareables.map((shareable) => /* @__PURE__ */ jsx("div", {
							className: `flex shrink-0 flex-col items-center ${onItemClick ? "cursor-pointer" : ""}`,
							...onItemClick ? {
								role: "button",
								tabIndex: 0,
								onClick: () => onItemClick(shareable),
								onKeyDown: (e) => {
									if (e.key === "Enter" || e.key === " ") {
										e.preventDefault();
										onItemClick(shareable);
									}
								}
							} : {},
							children: /* @__PURE__ */ jsx("div", {
								className: `aspect-3/4 h-40 overflow-hidden rounded-${borderRadius}`,
								children: /* @__PURE__ */ jsx(MediaRenderer, { ...getMediaPropsFromShareable(shareable) })
							})
						}, shareable.id))
					})
				})]
			})]
		}), hasNestedMedia && /* @__PURE__ */ jsxs("div", {
			className: `relative hidden min-w-0 self-stretch @md:flex @md:flex-1 px-${padding}`,
			children: [/* @__PURE__ */ jsx("div", {
				ref: scrollContainerRef,
				className: `flex h-full flex-row overflow-x-auto gap-${gapValues[gap]}`,
				style: { scrollSnapType: "x mandatory" },
				children: shareables.map((shareable) => /* @__PURE__ */ jsxs("div", {
					className: `flex shrink-0 flex-col gap-1 ${onItemClick ? "cursor-pointer" : ""}`,
					style: {
						width: `calc(${primaryMediaHeight} * 0.75)`,
						scrollSnapAlign: "start"
					},
					...onItemClick ? {
						role: "button",
						tabIndex: 0,
						onClick: () => onItemClick(shareable),
						onKeyDown: (e) => {
							if (e.key === "Enter" || e.key === " ") {
								e.preventDefault();
								onItemClick(shareable);
							}
						}
					} : {},
					children: [/* @__PURE__ */ jsx("div", {
						className: `aspect-3/4 h-full rounded-${borderRadius} overflow-hidden`,
						children: /* @__PURE__ */ jsx(MediaRenderer, { ...getMediaPropsFromShareable(shareable) })
					}), /* @__PURE__ */ jsxs("span", {
						className: `flex-none text-sm text-${nestedTextColor}`,
						children: [/* @__PURE__ */ jsx("p", {
							className: "truncate",
							children: shareable.title || ""
						}), /* @__PURE__ */ jsx("p", {
							className: "truncate",
							children: (shareable.display_price ?? shareable.price) || ""
						})]
					})]
				}, shareable.id))
			}), /* @__PURE__ */ jsx("div", {
				className: `absolute inset-x-0 top-1/2 flex w-full -translate-y-1/2 items-center justify-between px-8`,
				children: /* @__PURE__ */ jsx(ScrollArrows, {
					onPrevious: () => scrollByAmount("prev"),
					onNext: () => scrollByAmount("next")
				})
			})]
		})]
	});
}
const nestedWidgetPropertySchema = {
	widgetType: "NestedWidget",
	displayName: "Nested Widget",
	tabsConfig: [{
		id: "styling",
		label: "Styling"
	}, {
		id: "data",
		label: "Data"
	}],
	dataSourceTargetProps: ["shareables"],
	fields: [
		{
			key: "resource",
			label: "Primary Media",
			type: "resource",
			description: "Select the primary media displayed in the large panel",
			allowedTypes: ["Medium"],
			tab: "styling",
			group: "Content"
		},
		{
			key: "titleEnabled",
			label: "Widget Title",
			type: "boolean",
			description: "Enable the title displayed over the primary media",
			defaultValue: true,
			tab: "styling",
			group: "Title"
		},
		{
			key: "titleText",
			label: "Title",
			type: "text",
			description: "Main title displayed over the primary media",
			defaultValue: "Featured Collection",
			tab: "styling",
			group: "Title",
			requiresKeyToBeTrue: "titleEnabled"
		},
		getFontSizeField({
			label: "Title Font Size",
			defaultValue: "xl",
			key: "titleFontSize",
			description: "Font size for the widget title",
			tab: "styling",
			group: "Title",
			requiresKeyToBeTrue: "titleEnabled"
		}),
		getColorField({
			defaultValue: "background",
			key: "titleColor",
			label: "Title Color",
			description: "Color for the widget title",
			tab: "styling",
			group: "Title",
			requiresKeyToBeTrue: "titleEnabled"
		}),
		getHeightField({
			key: "primaryMediaHeight",
			label: "Primary Media Height",
			description: "Height of the primary media container",
			defaultValue: "400px",
			tab: "styling",
			group: "Design"
		}),
		{
			key: "separator",
			type: "separator",
			label: "Separator",
			tab: "styling",
			group: "Design"
		},
		{
			key: "titleAlignment",
			label: "Content Alignment",
			type: "alignment",
			description: "Alignment of the content inside the primary media",
			defaultValue: {
				horizontal: "left",
				vertical: "bottom"
			},
			options: {
				horizontalEnabled: true,
				verticalEnabled: true
			},
			tab: "styling",
			group: "Design"
		},
		{
			key: "separator2",
			type: "separator",
			label: "Separator",
			tab: "styling",
			group: "Design"
		},
		getPaddingField({
			defaultValue: 4,
			key: "padding",
			label: "Padding",
			description: "Padding used throughout the widget",
			tab: "styling",
			group: "Design"
		}),
		getBorderRadiusField({
			defaultValue: "md",
			label: "Border Radius",
			key: "borderRadius",
			description: "Rounded corners for the widget",
			tab: "styling",
			group: "Design"
		}),
		getBorderWidthField({
			key: "borderWidth",
			label: "Border Width",
			description: "Border width for the widget",
			defaultValue: "none",
			tab: "styling",
			group: "Design"
		}),
		getBorderColorField({
			key: "borderColor",
			label: "Border Color",
			description: "Border color for the widget",
			defaultValue: "muted",
			tab: "styling",
			group: "Design"
		}),
		{
			key: "overlayEnabled",
			label: "Enable Overlay",
			type: "boolean",
			description: "Add a dark overlay to the primary media for better text readability",
			defaultValue: true,
			tab: "styling",
			group: "Design"
		},
		{
			key: "overlayType",
			label: "Overlay Type",
			type: "buttonGroup",
			description: "Type of overlay effect",
			defaultValue: "gradient",
			options: [{
				label: "Solid",
				value: "solid"
			}, {
				label: "Gradient",
				value: "gradient"
			}],
			tab: "styling",
			group: "Design",
			requiresKeyToBeTrue: "overlayEnabled"
		},
		{
			key: "overlayIntensity",
			label: "Overlay Intensity",
			type: "slider",
			description: "Opacity of the overlay (0-100)",
			min: 0,
			max: 100,
			step: 5,
			defaultValue: 50,
			unit: "%",
			tab: "styling",
			group: "Design",
			requiresKeyToBeTrue: "overlayEnabled"
		},
		getGapField({
			label: "Gap",
			defaultValue: "md",
			key: "gap",
			description: "Gap between nested media items",
			tab: "styling",
			group: "Nested Design"
		}),
		getColorField({
			defaultValue: "foreground",
			key: "nestedTextColor",
			label: "Nested Text Color",
			description: "Color for nested media labels",
			tab: "styling",
			group: "Nested Design"
		}),
		{
			type: "background",
			defaultValue: "background",
			key: "background",
			label: "Background",
			description: "Background color for nested media container",
			tab: "styling",
			group: "Nested Design"
		},
		{
			key: "dataSource",
			label: "Data Source",
			type: "dataSource",
			description: "Configure dynamic data fetching from an API",
			tab: "data",
			group: "Data Configuration"
		}
	],
	itemConfigSchema: {
		description: "Configure settings for this item",
		fields: [{
			key: "title",
			label: "Custom Title",
			type: "text",
			description: "Override the item's title for this widget"
		}]
	}
};
//#endregion
export { NestedWidget_exports as n, nestedWidgetPropertySchema as r, NestedWidget as t };

//# sourceMappingURL=NestedWidget-DuNuNaeT.mjs.map