import { a as IconSize, i as FormSize, n as AnalyticsId, r as FormOnColor, s as LanguageLocales, t as AVERAGE_CHARACTER_WIDTH_PX } from "./constants2.js";
import { t as getColor } from "./color.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 LazyIcon_default } from "./LazyIcon.js";
import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
import { t as useIdWithFallback } from "./useIdWithFallback.js";
import { t as getAriaDescribedBy } from "./accessibility.js";
import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
import { n as renderLabel } from "./utils2.js";
import { t as MaxCharacters_default } from "./MaxCharacters.js";
import classNames from "classnames";
import { useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./components/Input/styles.module.scss";
let InputTypes = /* @__PURE__ */ function(InputTypes$1) {
	InputTypes$1["text"] = "text";
	InputTypes$1["number"] = "number";
	InputTypes$1["email"] = "email";
	InputTypes$1["password"] = "password";
	InputTypes$1["search"] = "search";
	InputTypes$1["tel"] = "tel";
	InputTypes$1["url"] = "url";
	InputTypes$1["date"] = "date";
	InputTypes$1["time"] = "time";
	return InputTypes$1;
}({});
var HN_Designsystem_Input_en_GB_default = { characters: "characters" };
var HN_Designsystem_Input_nb_NO_default = { characters: "tegn" };
var HN_Designsystem_Input_nn_NO_default = { characters: "teikn" };
const getResources = (language) => {
	switch (language) {
		case LanguageLocales.ENGLISH: return HN_Designsystem_Input_en_GB_default;
		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_Input_nn_NO_default;
		case LanguageLocales.NORWEGIAN:
		default: return HN_Designsystem_Input_nb_NO_default;
	}
};
var getInputMaxWidth = (characters$3, hasIcon, iconSize) => {
	const paddingWidth = hasIcon ? "1.5rem" : "2rem";
	const iconWidth = hasIcon ? `${iconSize}px` : "0px";
	return `calc(${characters$3 * 12}px + ${paddingWidth} + ${iconWidth} + 4px)`;
};
var Input = (props) => {
	const { className, defaultValue, placeholder, type = InputTypes.text, name, transparent = false, icon, iconRight, inputWrapperRef, onColor = FormOnColor.onwhite, size, baseIncrementValue, label, error, errorText, errorTextId: errorTextIdProp, inputId: inputIdProp, errorWrapperClassName, testId, disabled, readOnly, autoComplete = "off", afterInputChildren, rightOfInput, width, required, onChange, onKeyDown, autoFocus, maxCharacters, inputContainerRef, resources, ref, ...rest } = props;
	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
	const mergedResources = {
		...getResources(language),
		...resources
	};
	const breakpoint = useBreakpoint();
	const inputContainerRefLocal = useRef(null);
	const inputId = useIdWithFallback(inputIdProp);
	const [input, setInput] = useState(defaultValue || "");
	const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);
	const [prevValue, setPrevValue] = useState(void 0);
	const numKeyPressed = useRef(false);
	const errorTextId = useIdWithFallback(errorTextIdProp);
	const numRegex = /^[0-9]$/;
	if (defaultValue !== prevDefaultValue) {
		setPrevDefaultValue(defaultValue);
		setInput(defaultValue || "");
	}
	const onDark = onColor === FormOnColor.ondark;
	const onBlueberry = onColor === FormOnColor.onblueberry;
	const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;
	const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;
	const isLarge = size === FormSize.large;
	const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;
	const inputWrapperClass = classNames(styles["input-wrapper"], className);
	const inputContainer = classNames(styles["input-container"], {
		[styles["input-container--transparent"]]: isTransparent,
		[styles["input-container--on-blueberry"]]: onBlueberry,
		[styles["input-container--on-dark"]]: onDark,
		[styles["input-container--invalid"]]: onError,
		[styles["input-container--disabled"]]: disabled,
		[styles["input-container--with-icon"]]: icon,
		[styles["input-container--with-icon--right"]]: icon && iconRight
	});
	const inputClass = classNames(styles["input-container__input"], {
		[styles["input-container__input--large"]]: isLarge,
		[styles["input-container__input--disabled"]]: disabled
	});
	const iconColor = disabled ? getColor("neutral", 700) : getColor("black");
	const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;
	const renderIcon = () => {
		if (!icon) return;
		if (typeof icon === "string") return /* @__PURE__ */ jsx(LazyIcon_default, {
			className: styles["input-container__input__icon"],
			color: iconColor,
			size: iconSize,
			iconName: icon
		});
		return /* @__PURE__ */ jsx(Icon_default, {
			className: styles["input-container__input__icon"],
			color: iconColor,
			size: iconSize,
			svgIcon: icon
		});
	};
	const handleClick = (e) => {
		if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {
			const selectedChild = iconRight ? 0 : 1;
			inputContainerRefLocal.current.children[selectedChild].focus();
			if (props.onClick) props.onClick(e);
		}
	};
	const handleChange = (e) => {
		const newValue = getIncrementValue(e);
		if (onChange) onChange(e);
		setInput(newValue);
		setPrevValue(newValue);
	};
	const getIncrementValue = (e) => {
		if (typeof baseIncrementValue === "undefined" || type !== "number") return e.target.value;
		const valueAsNumber = Number(e.target.value);
		if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) e.target.value = baseIncrementValue + "";
		return e.target.value;
	};
	const handleKeyDown = (e) => {
		if (numRegex.test(e.key)) numKeyPressed.current = true;
		if (onKeyDown) onKeyDown(e);
	};
	const handleKeyUp = (e) => {
		if (numRegex.test(e.key)) numKeyPressed.current = false;
	};
	const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : void 0;
	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
		className: errorWrapperClassName,
		errorText,
		errorTextId,
		children: /* @__PURE__ */ jsxs("div", {
			"data-testid": testId,
			"data-analyticsid": AnalyticsId.Input,
			className: inputWrapperClass,
			ref: inputWrapperRef,
			children: [
				renderLabel({
					label,
					inputId,
					onColor
				}),
				/* @__PURE__ */ jsxs("div", {
					className: styles["content-wrapper"],
					children: [/* @__PURE__ */ jsxs("div", {
						onClick: handleClick,
						ref: mergeRefs([inputContainerRefLocal, inputContainerRef]),
						className: inputContainer,
						style: { maxWidth },
						children: [
							!iconRight && renderIcon(),
							/* @__PURE__ */ jsx("input", {
								...rest,
								onChange: handleChange,
								onKeyDown: handleKeyDown,
								onKeyUp: handleKeyUp,
								name,
								type,
								defaultValue,
								id: inputId,
								className: inputClass,
								ref,
								"aria-describedby": getAriaDescribedBy(props, errorTextId),
								"aria-invalid": !!onError,
								disabled,
								placeholder,
								readOnly,
								autoComplete: autoComplete || "off",
								required,
								autoFocus
							}),
							iconRight && renderIcon()
						]
					}), /* @__PURE__ */ jsx("div", {
						className: styles["content-wrapper__right-of-input"],
						children: rightOfInput
					})]
				}),
				maxCharacters && /* @__PURE__ */ jsx(MaxCharacters_default, {
					maxCharacters,
					length: input.toString().length,
					maxText: mergedResources.characters,
					onColor,
					maxWidth
				}),
				afterInputChildren
			]
		})
	});
};
Input.displayName = "Input";
var Input_default = Input;
export { InputTypes as n, Input_default as t };

//# sourceMappingURL=Input.js.map