import { t as usePseudoClasses } from "../../usePseudoClasses.js";
import { n as mergeRefs } from "../../refs.js";
import { t as Icon_default } from "../../Icon.js";
import { t as useIsMobileBreakpoint } from "../../useIsMobileBreakpoint.js";
import { t as useIdWithFallback } from "../../useIdWithFallback.js";
import { t as getAriaDescribedBy } from "../../accessibility.js";
import { t as X_default } from "../../X.js";
import classNames from "classnames";
import { useId, useLayoutEffect, useRef } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import styles from "./styles.module.scss";
var Close = (props) => {
	const { testId, ariaLabel = "Lukk", onClick, ref } = props;
	const { refObject, isHovered } = usePseudoClasses();
	const iconSize = useIsMobileBreakpoint() ? 38 : 48;
	const closeClasses = classNames(styles.close);
	return /* @__PURE__ */ jsx("button", {
		ref: mergeRefs([ref, refObject]),
		"data-testid": testId,
		className: closeClasses,
		"aria-label": ariaLabel,
		onClick,
		type: "button",
		children: /* @__PURE__ */ jsx("span", {
			className: classNames(styles["close__inner-container"]),
			children: /* @__PURE__ */ jsx(Icon_default, {
				svgIcon: X_default,
				color: "black",
				size: iconSize,
				isHovered
			})
		})
	});
};
var Close_default = Close;
var Triangle = ({ isHover, isFocus, isActive, isError }) => {
	const uniqueId = useId();
	const maskIdFocus = `${uniqueId}-mask-focus`;
	const maskIdNormal = `${uniqueId}-mask-normal`;
	const palette = (() => {
		const colors = {
			border: "var(--component-stickynote-border-normal)",
			background: "var(--component-stickynote-background-fold-normal-light)"
		};
		if (!isError) {
			if (isHover) colors.background = "var(--component-stickynote-background-fold-normal-medium)";
			if (isFocus) {
				colors.border = "var(--color-action-border-onlight-focus)";
				colors.background = "var(--component-stickynote-background-fold-normal-medium)";
			}
			if (isActive) colors.background = "var(--component-stickynote-background-fold-normal-dark)";
		} else {
			colors.border = "var(--component-stickynote-border-error)";
			colors.background = "var(--component-stickynote-background-fold-error-light)";
			if (isHover) colors.background = "var(--component-stickynote-background-fold-error-medium)";
			if (isFocus) {
				colors.border = "var(--color-action-border-onlight-focus)";
				colors.background = "var(--component-stickynote-background-fold-error-medium)";
			}
			if (isActive) colors.background = "var(--component-stickynote-background-fold-error-dark)";
		}
		return colors;
	})();
	let svg;
	if (isFocus) svg = /* @__PURE__ */ jsxs("svg", {
		width: "21",
		height: "21",
		viewBox: "0 0 21 21",
		fill: "none",
		xmlns: "http://www.w3.org/2000/svg",
		children: [
			/* @__PURE__ */ jsx("mask", {
				id: maskIdFocus,
				fill: "white",
				children: /* @__PURE__ */ jsx("path", { d: "M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z" })
			}),
			/* @__PURE__ */ jsx("path", {
				d: "M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z",
				fill: palette.background
			}),
			/* @__PURE__ */ jsx("path", {
				d: "M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z",
				fill: palette.border,
				mask: `url(#${maskIdFocus})`
			})
		]
	});
	else svg = /* @__PURE__ */ jsxs("svg", {
		width: "21",
		height: "21",
		viewBox: "0 0 21 21",
		fill: "none",
		xmlns: "http://www.w3.org/2000/svg",
		children: [
			/* @__PURE__ */ jsx("mask", {
				id: maskIdNormal,
				fill: "white",
				children: /* @__PURE__ */ jsx("path", { d: "M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z" })
			}),
			/* @__PURE__ */ jsx("path", {
				d: "M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z",
				fill: palette.background
			}),
			/* @__PURE__ */ jsx("path", {
				d: "M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z",
				fill: palette.border,
				mask: `url(#${maskIdNormal})`
			})
		]
	});
	return /* @__PURE__ */ jsx(Fragment, { children: svg });
};
var Triangle_default = Triangle;
var StickyNote = (props) => {
	const { wrapperClassName, timestamp, onXButtonClick, arialabelXButton, footerText, error, errorText, errorTextId: errorTextIdProp, onClickWhileDisabled, testId, ...textareaProps } = props;
	const errorTextId = useIdWithFallback(errorTextIdProp);
	const showErrorStyling = error || !!errorText;
	const stickynoteRef = useRef(null);
	const textareaRef = useRef(null);
	const { isFocused: isTextareaFocused } = usePseudoClasses(textareaRef);
	const { isHovered, isActive } = usePseudoClasses(stickynoteRef);
	const handleWrapperClick = (event) => {
		if (event.target.closest("button")) return;
		if (textareaProps.disabled) {
			if (onClickWhileDisabled) onClickWhileDisabled();
			return;
		}
		textareaRef.current?.focus();
	};
	const resizeTextarea = () => {
		const textarea = textareaRef.current;
		if (!textarea) return;
		resizeTarget(textarea);
	};
	const resizeTarget = (target) => {
		target.style.height = "inherit";
		target.style.height = `${target.scrollHeight}px`;
	};
	useLayoutEffect(() => {
		resizeTextarea();
		setTimeout(() => resizeTextarea(), 1e3);
	}, []);
	const handleChange = (e) => {
		const textarea = e.target;
		resizeTarget(textarea);
		if (textareaProps.onChange) textareaProps.onChange(e);
	};
	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
		"data-testid": testId,
		ref: stickynoteRef,
		className: classNames(styles["sticky-note"], wrapperClassName, {
			[styles["sticky-note--focused"]]: isTextareaFocused,
			[styles["sticky-note--active"]]: isActive,
			[styles["sticky-note--hovered"]]: isHovered && !isTextareaFocused && !textareaProps.disabled,
			[styles["sticky-note--error"]]: showErrorStyling
		}),
		onClick: handleWrapperClick,
		role: "textbox",
		tabIndex: -1,
		onKeyDown: (e) => {
			if (e.key === "Enter" || e.key === " ") handleWrapperClick(e);
		},
		children: [
			/* @__PURE__ */ jsx("div", {
				className: classNames(styles["sticky-note__header"]),
				children: timestamp && /* @__PURE__ */ jsx("span", {
					className: styles["sticky-note__header__timestamp"],
					children: timestamp
				})
			}),
			/* @__PURE__ */ jsx("textarea", {
				ref: textareaRef,
				"data-testid": `${testId}-textarea`,
				className: classNames(styles["sticky-note__textarea"], textareaProps.className),
				...textareaProps,
				onChange: handleChange,
				"aria-describedby": getAriaDescribedBy(props, errorTextId)
			}),
			/* @__PURE__ */ jsx(Close_default, {
				onClick: onXButtonClick,
				ariaLabel: arialabelXButton,
				testId: "closeButton"
			}),
			/* @__PURE__ */ jsx("div", {
				className: classNames(styles["sticky-note__footer"]),
				children: footerText && /* @__PURE__ */ jsx("span", { children: footerText })
			}),
			/* @__PURE__ */ jsx("div", {
				className: classNames(styles["sticky-note__triangle"]),
				children: /* @__PURE__ */ jsx(Triangle_default, {
					isHover: isHovered,
					isActive,
					isFocus: isTextareaFocused,
					isError: showErrorStyling
				})
			})
		]
	}), errorText && /* @__PURE__ */ jsx("p", {
		className: styles["sticky-note__error-text"],
		id: errorTextId,
		children: errorText
	})] });
};
var StickyNote_default = StickyNote;
export { StickyNote_default as default };

//# sourceMappingURL=index.js.map