import { a as IconSize, n as AnalyticsId } from "./constants2.js";
import { t as palette } from "./palette.js";
import { t as Icon_default } from "./Icon.js";
import { t as Badge_default } from "./Badge.js";
import { t as ArrowRight_default } from "./ArrowRight.js";
import { t as Button_default } from "./Button.js";
import { n as getAriaLabelAttributes } from "./accessibility.js";
import { t as Title_default } from "./Title2.js";
import { t as ChevronDown_default } from "./ChevronDown.js";
import { t as ChevronUp_default } from "./ChevronUp.js";
import { t as useExpand } from "./useExpand.js";
import { t as AlertSignFill_default } from "./AlertSignFill.js";
import { t as Calendar_default } from "./Calendar.js";
import { t as Pencil_default } from "./Pencil.js";
import { t as Watch_default } from "./Watch.js";
import React, { useId } from "react";
import classNames from "classnames";
import { jsx, jsxs } from "react/jsx-runtime";
import panelStyles from "./components/PanelOld/styles.module.scss";
let PanelOldStatus = /* @__PURE__ */ function(PanelOldStatus$1) {
	PanelOldStatus$1["normal"] = "normal";
	PanelOldStatus$1["new"] = "new";
	PanelOldStatus$1["error"] = "error";
	PanelOldStatus$1["draft"] = "draft";
	return PanelOldStatus$1;
}({});
let PanelOldVariant = /* @__PURE__ */ function(PanelOldVariant$1) {
	PanelOldVariant$1["fill"] = "fill";
	PanelOldVariant$1["white"] = "white";
	PanelOldVariant$1["stroke"] = "stroke";
	PanelOldVariant$1["line"] = "line";
	return PanelOldVariant$1;
}({});
let PanelOldLayout = /* @__PURE__ */ function(PanelOldLayout$1) {
	PanelOldLayout$1["layout1"] = "layout1";
	PanelOldLayout$1["layout2"] = "layout2";
	PanelOldLayout$1["layout3a"] = "layout3a";
	PanelOldLayout$1["layout3b"] = "layout3b";
	PanelOldLayout$1["layout3c"] = "layout3c";
	return PanelOldLayout$1;
}({});
var StatusText = ({ status, statusMessage }) => {
	const statusIcon = () => {
		if (status === PanelOldStatus.error) return {
			color: palette.cherry500,
			svgIcon: AlertSignFill_default
		};
		return {
			color: palette.black,
			svgIcon: Pencil_default
		};
	};
	const statusMessageClass = classNames(panelStyles["status-message"], { [panelStyles["status-message--new"]]: status === PanelOldStatus.new });
	if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) return /* @__PURE__ */ jsxs("div", {
		className: statusMessageClass,
		"data-testid": "display-status",
		children: [
			/* @__PURE__ */ jsx(Icon_default, {
				...statusIcon(),
				size: IconSize.XSmall
			}),
			" ",
			/* @__PURE__ */ jsx("span", { children: statusMessage })
		]
	});
	return null;
};
var PreContainer = ({ children }) => {
	if (typeof children === "undefined") return null;
	return /* @__PURE__ */ jsx("div", {
		className: panelStyles["header-container"],
		children
	});
};
var DateTime = ({ date, time }) => {
	if (date || time) return /* @__PURE__ */ jsxs("div", {
		className: panelStyles["datetime-container"],
		"data-testid": "datetime",
		children: [date && /* @__PURE__ */ jsxs("div", {
			className: panelStyles["datetime-container__icon"],
			children: [/* @__PURE__ */ jsx(Icon_default, {
				svgIcon: Calendar_default,
				size: IconSize.XSmall
			}), /* @__PURE__ */ jsx("span", { children: date })]
		}), time && /* @__PURE__ */ jsxs("div", {
			className: panelStyles["datetime-container__icon"],
			children: [/* @__PURE__ */ jsx(Icon_default, {
				svgIcon: Watch_default,
				size: IconSize.XSmall
			}), /* @__PURE__ */ jsx("span", { children: time })]
		})]
	});
	return null;
};
var PanelLayout1 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
	const panelLayoutClasses = classNames(panelStyles["panel__layout-1"], { [panelStyles["panel__layout-1--with-icon"]]: icon });
	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-1"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
	return /* @__PURE__ */ jsxs("div", {
		className: panelLayoutClasses,
		children: [
			/* @__PURE__ */ jsx(StatusText, {
				status,
				statusMessage
			}),
			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
			icon && /* @__PURE__ */ jsx("div", {
				className: iconClasses,
				children: icon
			}),
			/* @__PURE__ */ jsxs("div", {
				className: panelStyles["panel__layout-1__content-a"],
				children: [titleElement, contentA]
			}),
			contentB && /* @__PURE__ */ jsx("div", { children: contentB }),
			ctaContainer
		]
	});
};
var PanelLayout2 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
	const panelLayoutClasses = classNames(panelStyles["panel__layout-2"], { [panelStyles["panel__layout-2--with-icon"]]: icon });
	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-2"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
	const lastColumnClass = panelStyles["panel__layout-2__last-column"];
	return /* @__PURE__ */ jsxs("div", {
		className: panelLayoutClasses,
		children: [
			/* @__PURE__ */ jsx(StatusText, {
				status,
				statusMessage
			}),
			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
			icon && /* @__PURE__ */ jsx("div", {
				className: iconClasses,
				children: icon
			}),
			/* @__PURE__ */ jsxs("div", {
				className: panelStyles["panel__layout-2__content-a"],
				children: [titleElement, contentA]
			}),
			contentB && /* @__PURE__ */ jsx("div", {
				className: lastColumnClass,
				children: contentB
			}),
			ctaContainer && /* @__PURE__ */ jsx("div", {
				className: lastColumnClass,
				children: ctaContainer
			})
		]
	});
};
var PanelLayout3 = ({ contentA, contentB, contentHeader, ctaContainer, icon, layout, status, statusMessage, titleElement }) => {
	const layoutClasses = classNames(panelStyles["panel__layout-3"], {
		[panelStyles["panel__layout-3--with-icon"]]: icon,
		[panelStyles["panel__layout-3--a"]]: layout === PanelOldLayout.layout3a,
		[panelStyles["panel__layout-3--b"]]: layout === PanelOldLayout.layout3b,
		[panelStyles["panel__layout-3--c"]]: layout === PanelOldLayout.layout3c
	});
	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-3"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
	return /* @__PURE__ */ jsxs("div", {
		className: layoutClasses,
		children: [
			/* @__PURE__ */ jsx(StatusText, {
				status,
				statusMessage
			}),
			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
			icon && /* @__PURE__ */ jsx("div", {
				className: iconClasses,
				children: icon
			}),
			/* @__PURE__ */ jsxs("div", { children: [titleElement, contentA] }),
			/* @__PURE__ */ jsxs("div", {
				className: panelStyles["panel__layout-3__last-column"],
				children: [contentB && /* @__PURE__ */ jsx("div", {
					className: panelStyles["panel__layout-3__last-column__content-b"],
					children: contentB
				}), ctaContainer]
			})
		]
	});
};
var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref) {
	const { buttonAriaLabel, buttonAriaLabelledById, buttonText = "Se detaljer", buttonTextClose = "Skjul detaljer", buttonHtmlMarkup = "a", buttonOnClick, children, className, containerAsButton = false, contentA, contentB, contentHeader, date, expanded = false, focusable = false, icon, layout = PanelOldLayout.layout2, noTopBorder, onExpand, renderChildrenWhenClosed = false, status = PanelOldStatus.normal, statusMessage, target = "_self", testId, time, title, titleHtmlMarkup = "h2", url, variant = PanelOldVariant.fill } = props;
	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
	const titleId = useId();
	const buttonTextId = useId();
	const hasBadge = statusMessage && status === PanelOldStatus.new;
	const noContentB = typeof contentB === "undefined";
	const layout1 = layout === "layout1" || noContentB;
	const layout2 = !noContentB && layout === "layout2";
	const layout3 = !noContentB && (layout === "layout3a" || layout === "layout3b" || layout === "layout3c");
	const panelWrapperClasses = classNames(panelStyles["panel-wrapper"], className);
	const panelClasses = classNames(panelStyles.panel, {
		[panelStyles["panel--fill"]]: variant === PanelOldVariant.fill,
		[panelStyles["panel--stroke"]]: variant === PanelOldVariant.stroke,
		[panelStyles["panel--white"]]: variant === PanelOldVariant.white,
		[panelStyles["panel--line"]]: variant === PanelOldVariant.line,
		[panelStyles["panel--no-top-border"]]: variant === PanelOldVariant.line && noTopBorder,
		[panelStyles["panel--selected"]]: isExpanded,
		[panelStyles["panel--new"]]: status === PanelOldStatus.new,
		[panelStyles["panel--draft"]]: status === PanelOldStatus.draft,
		[panelStyles["panel--error"]]: status === PanelOldStatus.error,
		[panelStyles["panel--status"]]: status && status !== PanelOldStatus.normal,
		[panelStyles["panel--with-icon"]]: icon,
		[panelStyles["panel--button"]]: containerAsButton,
		[panelStyles["panel--clickable"]]: children || url || onExpand || buttonOnClick || containerAsButton
	});
	const renderCTAContainer = () => {
		const hasButton = children || url || buttonOnClick;
		const btnContainerClasses = classNames(panelStyles["panel__btn-container"], {
			[panelStyles["panel__btn-container--no-content-b"]]: noContentB,
			[panelStyles["panel__btn-container--no-button"]]: !hasButton
		});
		return (hasButton || date || time) && /* @__PURE__ */ jsxs("div", {
			className: btnContainerClasses,
			children: [/* @__PURE__ */ jsx(DateTime, {
				date,
				time
			}), hasButton && /* @__PURE__ */ jsx("div", {
				className: panelStyles["panel__details-btn"],
				children: renderDetailsButton()
			})]
		});
	};
	const renderDetailsButton = () => {
		const ariaLabelAttributes = getAriaLabelAttributes({
			label: buttonAriaLabel,
			id: buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}` || title && titleId && `${buttonTextId} ${titleId}`,
			prefer: "label"
		});
		const commonProps = {
			onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),
			className: containerAsButton ? panelStyles["panel__expand"] : void 0,
			variant: "borderless",
			ellipsis: true,
			...ariaLabelAttributes
		};
		if (children) return /* @__PURE__ */ jsxs(Button_default, {
			testId: "expand",
			"aria-expanded": isExpanded,
			...commonProps,
			children: [/* @__PURE__ */ jsx("span", {
				id: buttonTextId,
				children: isExpanded ? buttonTextClose : buttonText
			}), /* @__PURE__ */ jsx(Icon_default, { svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default })]
		});
		return /* @__PURE__ */ jsxs(Button_default, {
			testId: "url",
			htmlMarkup: buttonHtmlMarkup,
			href: url,
			target,
			...commonProps,
			children: [/* @__PURE__ */ jsx("span", {
				id: buttonTextId,
				children: buttonText
			}), /* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight_default })]
		});
	};
	const renderContent = () => {
		if (!children || !renderChildrenWhenClosed && !isExpanded) return null;
		return /* @__PURE__ */ jsx("div", {
			className: classNames(panelStyles["panel-details"], {
				[panelStyles["panel-details--open"]]: isExpanded,
				[panelStyles["panel-details--line"]]: variant === PanelOldVariant.line,
				[panelStyles["panel-details--white"]]: variant === PanelOldVariant.white
			}),
			"data-testid": "panel-details",
			children: /* @__PURE__ */ jsx("div", { children })
		});
	};
	const renderTitle = () => {
		const titleContainerClasses = classNames(panelStyles["title-container"], { [panelStyles["title-container--no-content-a"]]: !contentA });
		const titleClasses = classNames(panelStyles["title-container__title"], { [panelStyles["title-container__title--badge"]]: hasBadge });
		return title && /* @__PURE__ */ jsxs("div", {
			className: titleContainerClasses,
			children: [/* @__PURE__ */ jsx(Title_default, {
				appearance: "title3",
				htmlMarkup: titleHtmlMarkup,
				id: titleId,
				className: titleClasses,
				children: title
			}), hasBadge && /* @__PURE__ */ jsx("div", {
				className: panelStyles.panel__badge,
				children: /* @__PURE__ */ jsx(Badge_default, {
					color: "blueberry",
					testId: "badge-status",
					children: statusMessage
				})
			})]
		});
	};
	const layoutProps = {
		contentA,
		contentB,
		contentHeader,
		ctaContainer: renderCTAContainer(),
		icon,
		status,
		statusMessage,
		titleElement: renderTitle()
	};
	return /* @__PURE__ */ jsxs("div", {
		tabIndex: focusable ? -1 : void 0,
		ref,
		"data-testid": testId,
		className: panelWrapperClasses,
		"data-analyticsid": AnalyticsId.PanelOld,
		children: [/* @__PURE__ */ jsxs("div", {
			className: panelClasses,
			children: [
				layout1 && /* @__PURE__ */ jsx(PanelLayout1, { ...layoutProps }),
				layout2 && /* @__PURE__ */ jsx(PanelLayout2, { ...layoutProps }),
				layout3 && /* @__PURE__ */ jsx(PanelLayout3, {
					...layoutProps,
					layout
				})
			]
		}), renderContent()]
	});
});
export { PanelOldVariant as i, PanelOldLayout as n, PanelOldStatus as r, PanelOld_default$1 as t };

//# sourceMappingURL=PanelOld.js.map