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 { r as useLanguage } from "./language.js";
import { t as useIdWithFallback } from "./useIdWithFallback.js";
import { t as getAriaDescribedBy } from "./accessibility.js";
import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
import { r as renderLabel } from "./Label.js";
import { t as MaxCharacters_default } from "./MaxCharacters.js";
import React, { useEffect, useRef, useState } from "react";
import classNames from "classnames";
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 = React.forwardRef((props, ref) => {
	const { maxCharacters, maxText, 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, ...rest } = props;
	const [rows, setRows] = useState(minRows);
	const [textareaInput, setTextareaInput] = useState(value || defaultValue || "");
	const referanse = useRef(null);
	const errorTextUuid = useIdWithFallback(errorTextIdProp);
	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
	const defaultResources = getResources(language);
	const mergedResources = {
		...defaultResources,
		...resources,
		characters: maxText || resources?.characters || defaultResources.characters
	};
	useEffect(() => {
		setTextareaInput(defaultValue || "");
	}, [defaultValue]);
	const resizeHeight = (target) => {
		const textareaLineHeight = 28;
		const previousRows = target.rows;
		target.rows = minRows;
		const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight);
		if (currentRows === previousRows) target.rows = currentRows;
		if (currentRows >= maxRows) {
			target.rows = maxRows;
			target.scrollTop = target.scrollHeight;
		}
		if (currentRows < maxRows) setRows(currentRows);
		else setRows(maxRows);
	};
	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 });
	useEffect(() => {
		if (value) setTextareaInput(value);
		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, textareaId, onColor),
				/* @__PURE__ */ jsx("div", {
					className: contentWrapperClass,
					ref: referanse,
					style: { maxWidth },
					children: /* @__PURE__ */ jsx("textarea", {
						...rest,
						rows,
						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