/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b04eed0 | Cube Dev Team */
import { useAutoTooltip } from "../use-auto-tooltip.js";
import { SlashIcon } from "../../../icons/SlashIcon.js";
import { Button } from "../../actions/Button/Button.js";
import { Link } from "../../actions/Link/Link.js";
import { _LayoutContent } from "./LayoutContent.js";
import { tasty } from "@tenphi/tasty";
import { Fragment, forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { IconArrowLeft } from "@tabler/icons-react";

//#region src/components/content/Layout/LayoutHeader.tsx
const HeaderElement = tasty(_LayoutContent, {
	as: "header",
	qa: "LayoutHeader",
	styles: {
		container: "none",
		border: "bottom",
		flexShrink: 0,
		flexGrow: 0,
		Inner: {
			$: ">",
			display: "grid",
			gridTemplate: `
        "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" auto
        "back title suffix extra" 1fr
        ".. subtitle subtitle extra" auto
        / auto max-content 1fr minmax(0, auto)
      `,
			gap: 0,
			placeContent: "stretch",
			placeItems: "center stretch"
		},
		Back: {
			$: "> Inner >",
			gridArea: "back",
			display: "flex",
			placeItems: "center",
			margin: ".5x right"
		},
		Breadcrumbs: {
			$: "> Inner >",
			gridArea: "breadcrumbs",
			display: "flex",
			flow: "row nowrap",
			placeItems: "center start",
			gap: "1bw",
			preset: "t3 / strong",
			color: "#dark-02"
		},
		Title: {
			$: "> Inner >",
			gridArea: "title",
			preset: {
				"": "h3",
				"level=1": "h1",
				"level=2": "h2",
				"level=3": "h3",
				"level=4": "h4",
				"level=5": "h5",
				"level=6": "h6"
			},
			color: "#dark",
			margin: 0,
			overflow: "hidden",
			textOverflow: "ellipsis",
			whiteSpace: "nowrap"
		},
		Suffix: {
			$: "> Inner >",
			gridArea: "suffix",
			display: "flex",
			placeItems: "center"
		},
		Extra: {
			$: "> Inner >",
			gridArea: "extra",
			display: "flex",
			placeItems: "center",
			placeSelf: "end",
			gap: "1x",
			width: "max 100%"
		},
		Subtitle: {
			$: "> Inner >",
			gridArea: "subtitle",
			preset: "t3",
			color: "#dark-02"
		}
	}
});
function LayoutHeader(props, ref) {
	const { title, level = 3, suffix, extra, subtitle, breadcrumbs, onBack, scrollbar = "tiny", children, mods, ...otherProps } = props;
	const { labelRef, renderWithTooltip } = useAutoTooltip({
		tooltip: true,
		children: typeof title === "string" ? title : void 0
	});
	const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;
	const renderBreadcrumbs = () => {
		if (!hasBreadcrumbs) return null;
		return /* @__PURE__ */ jsx("div", {
			"data-element": "Breadcrumbs",
			children: breadcrumbs.map(([label, href], index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Link, {
				to: href,
				children: label
			}), /* @__PURE__ */ jsx(SlashIcon, {})] }, href))
		});
	};
	const renderTitle = (tooltipProps, tooltipRef) => {
		if (!title) return null;
		return /* @__PURE__ */ jsx(`h${level}`, {
			ref: tooltipRef,
			"data-element": "Title",
			"data-level": level,
			...tooltipProps,
			children: /* @__PURE__ */ jsx("span", {
				ref: labelRef,
				children: title
			})
		});
	};
	return /* @__PURE__ */ jsxs(HeaderElement, {
		...otherProps,
		ref,
		mods: {
			...mods,
			level
		},
		scrollbar,
		children: [
			renderBreadcrumbs(),
			onBack && /* @__PURE__ */ jsx("div", {
				"data-element": "Back",
				children: /* @__PURE__ */ jsx(Button, {
					type: "neutral",
					icon: /* @__PURE__ */ jsx(IconArrowLeft, {}),
					"aria-label": "Go back",
					onPress: onBack
				})
			}),
			renderWithTooltip(renderTitle, "bottom"),
			suffix && /* @__PURE__ */ jsx("div", {
				"data-element": "Suffix",
				children: suffix
			}),
			extra && /* @__PURE__ */ jsx("div", {
				"data-element": "Extra",
				children: extra
			}),
			subtitle && /* @__PURE__ */ jsx("div", {
				"data-element": "Subtitle",
				children: subtitle
			}),
			children
		]
	});
}
const _LayoutHeader = forwardRef(LayoutHeader);
_LayoutHeader.displayName = "Layout.Header";

//#endregion
export { _LayoutHeader };
//# sourceMappingURL=LayoutHeader.js.map