'use client';

import { Container } from "../../Container/index.mjs";
import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
import { DropDown } from "../../DropDown/index.mjs";
import { useVersionSwitcher } from "./VersionSwitcherContext.mjs";
import { MoveVertical } from "lucide-react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useIntlayer } from "react-intlayer";

//#region src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx
const DROPDOWN_IDENTIFIER = "version-switcher";
const VersionSwitcher = ({ panelProps }) => {
	const { switchTo, versionSwitcherLabel, versionListLabel } = useIntlayer("version-switcher");
	const { selectedVersion, versions, setSelectedVersion } = useVersionSwitcher();
	if (versions.length === 0) return /* @__PURE__ */ jsx(Fragment, {});
	return /* @__PURE__ */ jsx("div", {
		className: "rounded-xl border border-text text-text transition-colors",
		"aria-label": versionListLabel.value,
		children: /* @__PURE__ */ jsxs(DropDown, {
			identifier: DROPDOWN_IDENTIFIER,
			children: [/* @__PURE__ */ jsx(DropDown.Trigger, {
				identifier: DROPDOWN_IDENTIFIER,
				children: /* @__PURE__ */ jsxs("div", {
					className: "flex w-full items-center justify-between",
					children: [/* @__PURE__ */ jsx("div", {
						className: "px-2",
						children: selectedVersion ?? "LTS"
					}), /* @__PURE__ */ jsx(MoveVertical, { className: "w-5 self-center" })]
				})
			}), /* @__PURE__ */ jsx(DropDown.Panel, {
				identifier: DROPDOWN_IDENTIFIER,
				isOverable: true,
				isFocusable: true,
				className: "right-0 left-auto",
				...panelProps,
				children: /* @__PURE__ */ jsx(Container, {
					className: "max-h-[80vh] min-w-28",
					separator: "y",
					role: "listbox",
					transparency: "xs",
					border: true,
					roundedSize: "2xl",
					borderColor: "text",
					"aria-label": versionSwitcherLabel.value,
					children: /* @__PURE__ */ jsx("ol", {
						className: "divide-y divide-dashed divide-text/20 overflow-y-auto p-1",
						children: versions.reverse().map((version) => /* @__PURE__ */ jsx("li", {
							className: "px-1.5 py-1",
							children: /* @__PURE__ */ jsx(Button, {
								onClick: () => setSelectedVersion(version),
								label: `${switchTo} v${version}`,
								isActive: selectedVersion === version,
								variant: ButtonVariant.HOVERABLE,
								color: ButtonColor.TEXT,
								isFullWidth: true,
								textAlign: ButtonTextAlign.LEFT,
								size: ButtonSize.SM,
								children: /* @__PURE__ */ jsx("div", {
									className: "flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1 text-neutral text-sm",
									children: version
								})
							})
						}, version))
					})
				})
			})]
		})
	});
};

//#endregion
export { VersionSwitcher };
//# sourceMappingURL=VersionSwitcher.mjs.map