import { t as uuid } from "./uuid.js";
import { n as AnalyticsId, r as FormOnColor, s as LanguageLocales, t as AVERAGE_CHARACTER_WIDTH_PX } from "./constants2.js";
import { n as useLanguage } from "./useLanguage.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 { useLayoutEffect, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./components/Textarea/styles.module.scss";
var HN_Designsystem_TextArea_en_GB_default = { characters: "characters" };
var HN_Designsystem_TextArea_nb_NO_default = { characters: "tegn" };
var HN_Designsystem_TextArea_nn_NO_default = { characters: "teikn" };
const getResources = (language) => {
	switch (language) {
		case LanguageLocales.ENGLISH: return HN_Designsystem_TextArea_en_GB_default;
		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_TextArea_nn_NO_default;
		case LanguageLocales.NORWEGIAN:
		default: return HN_Designsystem_TextArea_nb_NO_default;
	}
};
var getTextareaMaxWidth = (characters$3) => {
	return `calc(${characters$3 * 12}px + 2rem + 16px + 4px)`;
};
var Textarea = (props) => {
	const { maxCharacters, width, testId, defaultValue, marginBottom: gutterBottom, transparent, onColor = FormOnColor.onwhite, label, textareaId = uuid(), minRows = 3, maxRows = 10, grow, error, errorText, errorTextId: errorTextIdProp, errorWrapperClassName, autoFocus, disabled, name, autoComplete = "off", placeholder, readOnly, required, onChange, value, resources, ref, ...rest } = props;
	const [textareaInput, setTextareaInput] = useState(value || defaultValue || "");
	const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);
	const [prevValue, setPrevValue] = useState(value);
	const referanse = useRef(null);
	const errorTextUuid = useIdWithFallback(errorTextIdProp);
	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
	const mergedResources = {
		...getResources(language),
		...resources
	};
	if (defaultValue !== prevDefaultValue) {
		setPrevDefaultValue(defaultValue);
		setTextareaInput(defaultValue || "");
	}
	if (value !== prevValue) {
		setPrevValue(value);
		if (value) setTextareaInput(value);
	}
	const resizeHeight = (target) => {
		const textareaLineHeight = 28;
		target.rows = minRows;
		const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight);
		if (currentRows >= maxRows) {
			target.rows = maxRows;
			target.scrollTop = target.scrollHeight;
		} else target.rows = currentRows;
	};
	const onDark = onColor === FormOnColor.ondark;
	const onBlueberry = onColor === FormOnColor.onblueberry;
	const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;
	const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;
	const textareaWrapperClass = classNames(styles.textarea, { [styles["textarea--gutterBottom"]]: gutterBottom });
	const contentWrapperClass = classNames(styles["input-container"], {
		[styles["input-container--transparent"]]: transparent,
		[styles["input-container--on-blueberry"]]: onBlueberry,
		[styles["input-container--on-dark"]]: onDark,
		[styles["input-container--invalid"]]: onError,
		[styles["input-container--disabled"]]: props.disabled
	});
	const textareaClass = classNames(styles["input-container__input"], { [styles[`input-container__input--disabled`]]: props.disabled });
	useLayoutEffect(() => {
		if (grow && referanse.current?.children && referanse.current?.children[0]) {
			const textarea = referanse.current?.children[0];
			resizeHeight(textarea);
		}
	}, [value]);
	const onChangeHandler = (e) => {
		setTextareaInput(e.target.value);
		if (onChange) onChange(e);
		if (grow) resizeHeight(e.target);
	};
	const maxWidth = width ? getTextareaMaxWidth(width) : void 0;
	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
		className: errorWrapperClassName,
		errorText,
		errorTextId: errorTextUuid,
		children: /* @__PURE__ */ jsxs("div", {
			"data-testid": testId,
			"data-analyticsid": AnalyticsId.Textarea,
			className: textareaWrapperClass,
			children: [
				renderLabel({
					label,
					inputId: textareaId,
					onColor
				}),
				/* @__PURE__ */ jsx("div", {
					className: contentWrapperClass,
					ref: referanse,
					style: { maxWidth },
					children: /* @__PURE__ */ jsx("textarea", {
						...rest,
						rows: minRows,
						defaultValue,
						id: textareaId,
						className: textareaClass,
						ref,
						"aria-describedby": getAriaDescribedBy(props, errorTextUuid),
						"aria-invalid": !!onError,
						autoFocus,
						disabled,
						name,
						autoComplete: autoComplete ? autoComplete : void 0,
						placeholder,
						readOnly,
						required,
						onChange: onChangeHandler,
						value
					})
				}),
				maxCharacters && /* @__PURE__ */ jsx(MaxCharacters_default, {
					maxCharacters,
					length: textareaInput.toString().length,
					maxText: mergedResources.characters,
					onColor,
					maxWidth
				})
			]
		})
	});
};
Textarea.displayName = "Textarea";
var Textarea_default$1 = Textarea;
export { Textarea_default$1 as t };

//# sourceMappingURL=Textarea.js.map