import { a as IconSize, c as ZIndex, n as AnalyticsId, o as KeyboardEventKey, s as LanguageLocales } from "../../constants2.js";
import { t as usePseudoClasses } from "../../usePseudoClasses.js";
import { t as theme } from "../../theme.js";
import { n as mergeRefs } from "../../refs.js";
import { t as Icon_default } from "../../Icon.js";
import { n as useLanguage } from "../../useLanguage.js";
import { t as Button_default } from "../../Button.js";
import { t as useToggle } from "../../useToggle.js";
import { t as useKeyboardEvent } from "../../useKeyboardEvent.js";
import { t as useOutsideEvent } from "../../useOutsideEvent.js";
import { n as HN_Designsystem_Dropdown_en_GB_default, t as HN_Designsystem_Dropdown_nb_NO_default } from "../../HN.Designsystem.Dropdown.nb-NO.js";
import { t as PlusSmall_default } from "../../PlusSmall.js";
import classNames from "classnames";
import React, { useEffect, useId, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./styles.module.scss";
let DropdownOldOnColor = /* @__PURE__ */ function(DropdownOldOnColor$1) {
	DropdownOldOnColor$1["onwhite"] = "onwhite";
	DropdownOldOnColor$1["ongrey"] = "ongrey";
	DropdownOldOnColor$1["onblueberry"] = "onblueberry";
	DropdownOldOnColor$1["oncherry"] = "oncherry";
	return DropdownOldOnColor$1;
}({});
const getResources = (language) => {
	switch (language) {
		case LanguageLocales.ENGLISH: return HN_Designsystem_Dropdown_en_GB_default;
		case LanguageLocales.NORWEGIAN:
		default: return HN_Designsystem_Dropdown_nb_NO_default;
	}
};
var DropdownOld = (props) => {
	const { label, placeholder, noCloseButton = false, onToggle, dropdownMinWidth, open = false, children, onColor = DropdownOldOnColor.onwhite, transparent = false, fluid = false, testId, disabled, zIndex = ZIndex.PopOver, resources } = props;
	const dropdownRef = useRef(null);
	const optionsRef = useRef(null);
	const { refObject: buttonRef, isHovered } = usePseudoClasses();
	const openedByKeyboard = useRef(false);
	const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);
	const inputRefList = useRef(React.Children.map(children, () => React.createRef()));
	const labelId = useId();
	const toggleLabelId = useId();
	const optionIdPrefix = useId();
	const contentId = useId();
	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
	const defaultResources = getResources(language);
	const mergedResources = {
		...defaultResources,
		...resources,
		closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText
	};
	const handleOpen = (isKeyboard) => {
		openedByKeyboard.current = isKeyboard;
		toggleIsOpen();
	};
	const handleClose = () => {
		toggleIsOpen();
		buttonRef.current?.focus();
	};
	useEffect(() => {
		if (isOpen && openedByKeyboard.current) {
			(inputRefList.current?.find((r) => r.current && !r.current.hasAttribute("disabled")))?.current?.focus();
			openedByKeyboard.current = false;
		}
	}, [isOpen]);
	const handleKeyboardNavigation = (event) => {
		if (!inputRefList.current) return;
		if (event.key === KeyboardEventKey.Escape) {
			if (isOpen) handleClose();
			return;
		}
		if (!isOpen) {
			handleOpen(true);
			event.preventDefault();
			return;
		}
		const index = inputRefList.current.findIndex((x) => x.current === event.target);
		let nextIndex = index;
		if (event.key === KeyboardEventKey.Home) nextIndex = 0;
		else if (event.key === KeyboardEventKey.End) nextIndex = inputRefList.current.length - 1;
		else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) nextIndex = index + 1;
		else if (event.key === KeyboardEventKey.ArrowUp && index > 0) nextIndex = index - 1;
		else if (event.key === KeyboardEventKey.Enter && index !== -1) nextIndex = index;
		if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {
			event.preventDefault();
			inputRefList.current[nextIndex].current?.focus();
		}
	};
	useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [
		KeyboardEventKey.ArrowDown,
		KeyboardEventKey.ArrowUp,
		KeyboardEventKey.End,
		KeyboardEventKey.Enter,
		KeyboardEventKey.Escape,
		KeyboardEventKey.Home,
		KeyboardEventKey.Space
	]);
	useOutsideEvent(dropdownRef, () => isOpen && handleClose());
	const toggleClasses = classNames(styles.dropdown__toggle, !disabled && {
		[styles["dropdown__toggle--on-white"]]: onColor === DropdownOldOnColor.onwhite,
		[styles["dropdown__toggle--on-grey"]]: onColor === DropdownOldOnColor.ongrey,
		[styles["dropdown__toggle--on-blueberry"]]: onColor === DropdownOldOnColor.onblueberry,
		[styles["dropdown__toggle--on-cherry"]]: onColor === DropdownOldOnColor.oncherry,
		[styles["dropdown__toggle--transparent"]]: transparent,
		[styles["dropdown__toggle--fluid"]]: fluid,
		[styles["dropdown__toggle--open"]]: isOpen
	});
	const contentClasses = classNames(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
	const renderChildren = React.Children.map(children, (child, index) => {
		const element = child;
		return /* @__PURE__ */ jsx("li", {
			className: styles.dropdown__input,
			id: `${optionIdPrefix}-${index}`,
			children: React.isValidElement(element) && inputRefList.current && inputRefList.current[index] ? React.cloneElement(element, { ref: mergeRefs([element.props.ref, inputRefList.current[index]]) }) : child
		});
	});
	return /* @__PURE__ */ jsxs("div", {
		className: styles.dropdown,
		ref: dropdownRef,
		children: [
			/* @__PURE__ */ jsx("span", {
				id: labelId,
				className: styles.dropdown__label,
				children: label
			}),
			/* @__PURE__ */ jsxs("button", {
				type: "button",
				onClick: () => handleOpen(false),
				className: toggleClasses,
				ref: buttonRef,
				"data-testid": testId,
				"data-analyticsid": AnalyticsId.Dropdown,
				disabled,
				"aria-labelledby": toggleLabelId,
				"aria-haspopup": true,
				"aria-controls": contentId,
				"aria-expanded": isOpen,
				children: [/* @__PURE__ */ jsx("span", {
					id: toggleLabelId,
					className: styles.dropdown__toggle__label,
					children: placeholder
				}), /* @__PURE__ */ jsx(Icon_default, {
					color: disabled ? theme.palette.neutral700 : theme.palette.blueberry600,
					svgIcon: PlusSmall_default,
					className: styles.dropdown__icon,
					isHovered: !disabled && isHovered,
					size: IconSize.XSmall
				})]
			}),
			/* @__PURE__ */ jsxs("div", {
				id: contentId,
				className: contentClasses,
				style: {
					width: fluid ? "100%" : `auto`,
					minWidth: dropdownMinWidth ?? "auto",
					zIndex
				},
				children: [/* @__PURE__ */ jsx("ul", {
					className: styles.dropdown__options,
					role: "group",
					"aria-labelledby": labelId,
					tabIndex: -1,
					ref: optionsRef,
					children: renderChildren
				}), !noCloseButton && /* @__PURE__ */ jsx("div", {
					className: styles.dropdown__close,
					children: /* @__PURE__ */ jsx(Button_default, {
						onClick: handleClose,
						children: mergedResources.closeText
					})
				})]
			})
		]
	});
};
var DropdownOld_default = DropdownOld;
export { DropdownOldOnColor, DropdownOld_default as default };

//# sourceMappingURL=index.js.map