import { n as isTest, t as isProd } from "./environment.js";
import { a as IconSize, n as AnalyticsId } from "./constants2.js";
import { t as usePseudoClasses } from "./usePseudoClasses.js";
import { t as getColor } from "./color.js";
import { t as Icon_default } from "./Icon.js";
import { t as useIcons } from "./useIcons.js";
import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
import { t as ArrowRight_default } from "./ArrowRight.js";
import classNames from "classnames";
import React, { useEffect, useRef } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import buttonStyles from "./components/Button/styles.module.scss";
var getIconColor = (fill, borderless, disabled, concept, ondark, mobile) => {
	if (mobile && disabled) return !ondark || fill ? getColor("neutral", !borderless ? 700 : 500) : getColor("white");
	if (disabled) return !ondark || fill ? getColor("neutral", 500) : `${getColor("white")}b3`;
	if (fill && !ondark || !fill && ondark) return "white";
	return concept === "normal" ? getColor("blueberry", 600) : getColor("cherry", 500);
};
var getLargeIconSize = (large, mobile) => {
	if (mobile && large) return IconSize.Small;
	if (large) return IconSize.Medium;
	return IconSize.XSmall;
};
var checkOnlyIconAria = (onlyIcon, ariaLabel, devEnv) => {
	if (devEnv && onlyIcon && (ariaLabel === void 0 || ariaLabel === "")) throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav");
};
var Button = (props) => {
	const { ariaLabel, id, children, wrapperClassName, className, arrow, concept = "normal", disabled = false, ellipsis = false, fluid = false, htmlMarkup = "button", onColor = "onlight", onBlur, onClick, size = "medium", variant = "fill", href, tabIndex, testId, target, type = "button", textClassName, textPosition = "left", ref, ...restProps } = props;
	const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));
	const { refObject, isHovered } = usePseudoClasses(ref);
	const buttonContentRef = useRef(null);
	const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;
	const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;
	const onDark = onColor === "ondark";
	const isMobile = useIsMobileBreakpoint();
	const destructive = concept === "destructive" && !disabled;
	const outlineVariant = variant === "outline";
	const borderlessVariant = variant === "borderless";
	const iconColor = getIconColor(variant === "fill", borderlessVariant, disabled, concept, onDark, isMobile);
	const hasArrow = arrow === "icon" && !borderlessVariant;
	const large = size === "large" && !destructive && !borderlessVariant;
	const hasUURightArrow = arrow === "accessibility-character" && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;
	const rest = { ...restProps };
	const buttonWrapperClasses = classNames(buttonStyles["button-wrapper"], { [buttonStyles["button-wrapper--fluid"]]: fluid || ellipsis }, wrapperClassName);
	const buttonClasses = classNames(buttonStyles.button, {
		[buttonStyles["button--destructive"]]: destructive,
		[buttonStyles["button--normal"]]: !large,
		[buttonStyles["button--large"]]: large,
		[buttonStyles["button--outline"]]: outlineVariant,
		[buttonStyles["button--borderless"]]: borderlessVariant,
		[buttonStyles["button--left-icon"]]: leftIcon && !onlyIcon,
		[buttonStyles["button--right-icon"]]: rightIcon && !onlyIcon,
		[buttonStyles["button--both-icons"]]: bothIcons,
		[buttonStyles["button--only-icon"]]: onlyIcon,
		[buttonStyles["button--arrow"]]: hasArrow,
		[buttonStyles["button--on-dark"]]: onDark
	}, className);
	const buttonTextClasses = classNames(buttonStyles["button__text"], {
		[buttonStyles["button__text--ellipsis"]]: ellipsis,
		[buttonStyles["button__text--centered"]]: fluid && textPosition === "centered"
	}, textClassName);
	const diagonalClasses = classNames(buttonStyles["diagonal"], { [buttonStyles["diagonal--on-dark"]]: onDark });
	useEffect(() => {
		checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());
	}, []);
	const renderIcon = (iconElement, iconSize, iconClassName) => {
		return iconElement ? React.cloneElement(iconElement, {
			size: iconSize,
			color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,
			isHovered: iconElement.props.isHovered === void 0 ? !disabled && isHovered : iconElement.props.isHovered,
			className: iconClassName
		}) : null;
	};
	const renderButtonContent = () => {
		return /* @__PURE__ */ jsxs("span", {
			className: buttonTextClasses,
			ref: buttonContentRef,
			children: [disabled && borderlessVariant && /* @__PURE__ */ jsx("span", {
				className: diagonalClasses,
				children: /* @__PURE__ */ jsx("span", { className: buttonStyles["diagonal__line"] })
			}), /* @__PURE__ */ jsx("span", { children: onlyIcon ? ariaLabel : restChildren })]
		});
	};
	const renderbuttonContentWrapper = () => /* @__PURE__ */ jsxs("span", {
		className: buttonClasses,
		children: [
			renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles["button__left-icon"] : void 0),
			renderButtonContent(),
			hasArrow ? renderIcon(/* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight_default }), getLargeIconSize(large, isMobile), classNames(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })) : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles["button__right-icon"]),
			hasUURightArrow && /* @__PURE__ */ jsx("span", {
				style: { color: iconColor },
				className: buttonStyles["button__right-unicode-arrow"],
				"aria-hidden": true,
				children: "  →"
			})
		]
	});
	return /* @__PURE__ */ jsxs(Fragment, { children: [htmlMarkup === "button" && /* @__PURE__ */ jsx("button", {
		id,
		onBlur,
		onClick,
		disabled,
		"data-testid": testId,
		"data-analyticsid": AnalyticsId.Button,
		className: buttonWrapperClasses,
		ref: refObject,
		tabIndex,
		type,
		...rest,
		children: renderbuttonContentWrapper()
	}), htmlMarkup === "a" && /* @__PURE__ */ jsx("a", {
		id,
		onBlur,
		onClick,
		"data-testid": testId,
		"data-analyticsid": AnalyticsId.Button,
		className: buttonWrapperClasses,
		href,
		target,
		rel: target === "_blank" ? "noopener noreferrer" : props.rel,
		ref: refObject,
		tabIndex,
		...restProps,
		children: renderbuttonContentWrapper()
	})] });
};
var Button_default$1 = Button;
export { Button_default$1 as t };

//# sourceMappingURL=Button.js.map