import { Select as e, SelectContent as t, SelectItem as n, SelectTrigger as r, SelectValue as i } from "../../../components/ui/select.js";
import { Tooltip as a, TooltipContent as o, TooltipTrigger as s } from "../../../components/ui/tooltip.js";
import { useWorkbenchLayout as c } from "../providers/WorkbenchLayoutProvider.js";
import { useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
import { jsx as p, jsxs as m } from "react/jsx-runtime";
import { ExternalLink as h, Loader2 as g, X as _ } from "lucide-react";
//#region src/features/workbench/components/WorkbenchPreviewPanel.tsx
var v = "loopstack:embed:new-run";
function y() {
	let { getEnvironmentPreviewUrl: y, environments: b, closeSidePanel: x, selectedSlotId: S, setSelectedSlotId: C } = c(), w = d(null), T = u(() => (b ?? []).filter((e) => !!e.connectionUrl && (!!e.workerId || e.local)), [b]), [E, D] = f(null);
	l(() => {
		!S && T.length > 0 && C(T[0].slotId);
	}, [
		T,
		S,
		C
	]);
	let O = u(() => T.find((e) => e.slotId === S), [T, S]), k = u(() => {
		if (!(!y || !O)) return y(O, E ?? void 0);
	}, [
		y,
		O,
		E
	]);
	return l(() => {
		let e = (e) => {
			if (e.origin !== window.location.origin) return;
			let t = e.data;
			if (t?.type !== v) return;
			let n = t?.workflowId;
			typeof n == "string" && D(n);
		};
		return window.addEventListener("message", e), () => window.removeEventListener("message", e);
	}, []), b === void 0 ? /* @__PURE__ */ m("div", {
		className: "border-l bg-zinc-950 flex w-1/2 shrink-0 flex-col",
		children: [/* @__PURE__ */ m("div", {
			className: "flex h-12 shrink-0 items-center justify-between px-3",
			children: [/* @__PURE__ */ p("span", {
				className: "text-sm font-medium text-white",
				children: "Preview"
			}), /* @__PURE__ */ p("button", {
				onClick: x,
				className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
				children: /* @__PURE__ */ p(_, { className: "h-4 w-4" })
			})]
		}), /* @__PURE__ */ p("div", {
			className: "flex flex-1 items-center justify-center",
			children: /* @__PURE__ */ p(g, { className: "h-5 w-5 animate-spin text-zinc-400" })
		})]
	}) : !y || T.length === 0 ? /* @__PURE__ */ m("div", {
		className: "border-l bg-zinc-950 flex w-1/2 shrink-0 flex-col",
		children: [/* @__PURE__ */ m("div", {
			className: "flex h-12 shrink-0 items-center justify-between px-3",
			children: [/* @__PURE__ */ p("span", {
				className: "text-sm font-medium text-white",
				children: "Preview"
			}), /* @__PURE__ */ p("button", {
				onClick: x,
				className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
				children: /* @__PURE__ */ p(_, { className: "h-4 w-4" })
			})]
		}), /* @__PURE__ */ p("div", {
			className: "text-zinc-400 flex flex-1 items-center justify-center text-sm",
			children: "Preview not available"
		})]
	}) : /* @__PURE__ */ m("div", {
		className: "border-l bg-zinc-950 flex w-1/2 shrink-0 flex-col",
		children: [/* @__PURE__ */ m("div", {
			className: "flex h-12 shrink-0 items-center justify-between px-3",
			children: [/* @__PURE__ */ m("div", {
				className: "flex items-center gap-2",
				children: [
					/* @__PURE__ */ p("span", {
						className: "text-sm font-medium text-white",
						children: "Preview"
					}),
					T.length > 1 && /* @__PURE__ */ m(e, {
						value: S,
						onValueChange: (e) => {
							C(e), D(null);
						},
						children: [/* @__PURE__ */ p(r, {
							className: "h-7 w-40 border-zinc-700 bg-zinc-900 text-zinc-200 text-xs",
							children: /* @__PURE__ */ p(i, {})
						}), /* @__PURE__ */ p(t, { children: T.map((e) => /* @__PURE__ */ p(n, {
							value: e.slotId,
							children: e.envName || e.slotId
						}, e.slotId)) })]
					}),
					T.length === 1 && O && /* @__PURE__ */ p("span", {
						className: "text-xs text-zinc-400",
						children: O.envName || O.slotId
					})
				]
			}), /* @__PURE__ */ m("div", {
				className: "flex items-center gap-1",
				children: [k && /* @__PURE__ */ m(a, { children: [/* @__PURE__ */ p(s, {
					asChild: !0,
					children: /* @__PURE__ */ p("a", {
						href: k,
						target: "_blank",
						rel: "noopener noreferrer",
						className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
						children: /* @__PURE__ */ p(h, { className: "h-4 w-4" })
					})
				}), /* @__PURE__ */ p(o, {
					side: "bottom",
					children: "Open in new tab"
				})] }), /* @__PURE__ */ p("button", {
					onClick: x,
					className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
					children: /* @__PURE__ */ p(_, { className: "h-4 w-4" })
				})]
			})]
		}), k ? /* @__PURE__ */ p("div", {
			className: "flex-1 overflow-hidden p-3 pt-0",
			children: /* @__PURE__ */ p("iframe", {
				ref: w,
				src: k,
				className: "bg-background h-full w-full rounded-lg",
				title: "Workflow preview"
			})
		}) : /* @__PURE__ */ p("div", {
			className: "text-zinc-400 flex flex-1 items-center justify-center text-sm",
			children: "Preview not available"
		})]
	});
}
//#endregion
export { y as WorkbenchPreviewPanel };
