'use strict';

var tslib_es6 = require('./tslib.es6-cjs.js');
var React = require('react');
var classnames = require('classnames');
var jobberHooks = require('@jobber/hooks');
var Heading = require('./Heading-cjs.js');
var Text = require('./Text-cjs.js');
var Content = require('./Content-cjs.js');
var Markdown = require('./Markdown-cjs.js');
var Button = require('./Button-cjs.js');
var Menu = require('./Menu-cjs.js');
var Emphasis = require('./Emphasis-cjs.js');
var filterDataAttributes = require('./filterDataAttributes-cjs.js');

var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};

const PageContext = React.createContext({ width: undefined });
function usePageContext() {
    return React.useContext(PageContext);
}
/** Discriminates between the props-based API and the composable children API. */
function isLegacy(props) {
    return "title" in props;
}
function Page(props) {
    var _a;
    const width = (_a = props.width) !== null && _a !== void 0 ? _a : "standard";
    const pageStyles = classnames(styles.page, styles[width]);
    if (isLegacy(props)) {
        return React.createElement(PageLegacy, Object.assign({}, props, { pageStyles: pageStyles }));
    }
    return (React.createElement(PageContext.Provider, { value: { width } },
        React.createElement("div", { className: pageStyles },
            React.createElement(Content.Content, null, props.children))));
}
/** Props-based renderer. Preserves the original Page behavior for existing consumers. */
function PageLegacy(_a) {
    var { title, titleMetaData, intro, externalIntroLinks, subtitle, children, primaryAction, secondaryAction, moreActionsMenu = [], pageStyles } = _a, rest = tslib_es6.__rest(_a, ["title", "titleMetaData", "intro", "externalIntroLinks", "subtitle", "children", "primaryAction", "secondaryAction", "moreActionsMenu", "pageStyles"]);
    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
    const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
    const titleBarClasses = classnames(styles.titleBar, {
        [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
        [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
        [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
    });
    const showMenu = moreActionsMenu.length > 0;
    const showActionGroup = showMenu || primaryAction || secondaryAction;
    return (React.createElement("div", Object.assign({ className: pageStyles }, dataAttrs),
        React.createElement(Content.Content, null,
            React.createElement(Content.Content, null,
                React.createElement("div", { className: titleBarClasses, ref: titleBarRef },
                    React.createElement("div", null,
                        typeof title === "string" && titleMetaData ? (React.createElement("div", { className: styles.titleRow },
                            React.createElement(Heading.Heading, { level: 1 }, title),
                            titleMetaData)) : typeof title === "string" ? (React.createElement(Heading.Heading, { level: 1 }, title)) : (title),
                        subtitle && (React.createElement("div", { className: styles.subtitle },
                            React.createElement(Text.Text, { size: "large", variation: "subdued" },
                                React.createElement(Emphasis.Emphasis, { variation: "bold" },
                                    React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
                    showActionGroup && (React.createElement("div", { className: styles.actionGroup },
                        primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
                            React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
                        secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
                            React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
                        showMenu && (React.createElement("div", { className: styles.actionButton },
                            React.createElement(Menu.Menu, { items: moreActionsMenu })))))),
                intro && (React.createElement(Text.Text, { size: "large" },
                    React.createElement(Markdown.Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
            React.createElement(Content.Content, null, children))));
}
/**
 * Groups the title area and actions into the page header layout.
 * Place non-action content (title, subtitle) inside `Page.HeaderContent`
 * and actions inside `Page.Actions`.
 */
function PageHeader(_a) {
    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
    const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
    const titleBarClasses = classnames(styles.titleBar, {
        [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
        [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
        [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
    });
    return (React.createElement("div", Object.assign({ className: titleBarClasses, ref: titleBarRef }, dataAttrs), children));
}
/** Wraps the title area (title, subtitle) inside `Page.Header`. Use when the header contains more than one content element to keep them stacked vertically. */
function PageHeaderContent(_a) {
    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
    return React.createElement("div", Object.assign({}, dataAttrs), children);
}
/**
 * Flex container for the page title and optional sibling elements such as
 * status badges. Use when you need to display metadata alongside the heading.
 *
 * @example
 * ```tsx
 * <Page.TitleBar>
 *   <Page.Title>Clients</Page.Title>
 *   <StatusLabel label="Active" status="success" />
 * </Page.TitleBar>
 * ```
 */
function PageTitleBar(_a) {
    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
    return (React.createElement("div", Object.assign({ className: styles.titleRow }, dataAttrs), children));
}
/**
 * Renders the page heading as an H1. When metadata is present alongside the
 * title, wrap both in `Page.TitleBar`.
 */
function PageTitle(_a) {
    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
    return (React.createElement(Heading.Heading, Object.assign({ level: 1 }, dataAttrs), children));
}
/** Secondary text below the title. Always applies default Text/Emphasis styling. */
function PageSubtitle(_a) {
    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
    return (React.createElement("div", Object.assign({ className: styles.subtitle }, dataAttrs),
        React.createElement(Text.Text, { size: "large", variation: "subdued" },
            React.createElement(Emphasis.Emphasis, { variation: "bold" }, children))));
}
/** Introduction text between the header and body. Always applies default Text styling. */
function PageIntro({ children }) {
    return React.createElement(Text.Text, { size: "large" }, children);
}
/** Container for action buttons and menu. Applies responsive actionGroup layout. */
function PageActions(_a) {
    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
    return (React.createElement("div", Object.assign({ className: styles.actionGroup }, dataAttrs), children));
}
/** Positional container for the primary action. Should contain a Button element, e.g. <Page.PrimaryButton>. */
function PageActionPrimary({ children, ref }) {
    return (React.createElement("div", { className: styles.primaryAction, ref: ref }, children));
}
/** Positional container for the secondary action. Should contain a Button element, e.g. <Page.SecondaryButton>. */
function PageActionSecondary({ children, ref }) {
    return (React.createElement("div", { className: styles.actionButton, ref: ref }, children));
}
/** Positional container for the menu action. Should contain Page.Menu or a custom Menu. */
function PageActionMenu({ children, ref }) {
    return (React.createElement("div", { className: styles.actionButton, ref: ref }, children));
}
/** Default primary Button with opinionated styling. Use inside Page.ActionPrimary. */
function PagePrimaryButton(_a) {
    var { ref, label, onClick, icon, disabled, loading, ariaLabel } = _a, rest = tslib_es6.__rest(_a, ["ref", "label", "onClick", "icon", "disabled", "loading", "ariaLabel"]);
    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
    return (React.createElement("div", Object.assign({ ref: ref }, dataAttrs),
        React.createElement(Button.Button, { label: label, onClick: onClick, icon: icon, disabled: disabled, loading: loading, ariaLabel: ariaLabel, fullWidth: true })));
}
/** Default secondary Button with opinionated styling. Use inside Page.ActionSecondary. */
function PageSecondaryButton(_a) {
    var { ref, label, onClick, icon, disabled, loading, ariaLabel } = _a, rest = tslib_es6.__rest(_a, ["ref", "label", "onClick", "icon", "disabled", "loading", "ariaLabel"]);
    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
    return (React.createElement("div", Object.assign({ ref: ref }, dataAttrs),
        React.createElement(Button.Button, { label: label, onClick: onClick, icon: icon, disabled: disabled, loading: loading, ariaLabel: ariaLabel, fullWidth: true, type: "secondary" })));
}
/**
 * "More Actions" menu with a default trigger button.
 * Consumers supply Menu.Item children (in case custom routing is needed,
 * e.g. wrapping Menu.Item with createLink() from TanStack Router).
 */
function PageMenu(_a) {
    var { children, triggerLabel = "More Actions" } = _a, rest = tslib_es6.__rest(_a, ["children", "triggerLabel"]);
    const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
    const { width } = usePageContext();
    const preferredPlacement = width === "fill" ? "bottom end" : undefined;
    return (React.createElement("div", Object.assign({}, dataAttrs),
        React.createElement(Menu.Menu, null,
            React.createElement(Menu.Menu.Trigger, { UNSAFE_style: { display: "block" } },
                React.createElement(Button.Button, { icon: "more", label: triggerLabel, type: "secondary", fullWidth: true })),
            React.createElement(Menu.Menu.Content, { preferredPlacement: preferredPlacement }, children))));
}
/** Main content area of the page. */
function PageBody({ children }) {
    return React.createElement(Content.Content, null, children);
}
const getActionProps = (actionProps) => {
    const buttonProps = (actionProps !== null && actionProps !== void 0 ? actionProps : {});
    if (actionProps === null || actionProps === void 0 ? void 0 : actionProps.ref)
        delete buttonProps.ref;
    return buttonProps;
};
Page.Header = PageHeader;
Page.HeaderContent = PageHeaderContent;
Page.TitleBar = PageTitleBar;
Page.Title = PageTitle;
Page.Subtitle = PageSubtitle;
Page.Intro = PageIntro;
Page.Actions = PageActions;
Page.ActionPrimary = PageActionPrimary;
Page.ActionSecondary = PageActionSecondary;
Page.ActionMenu = PageActionMenu;
Page.PrimaryButton = PagePrimaryButton;
Page.SecondaryButton = PageSecondaryButton;
Page.Menu = PageMenu;
Page.Body = PageBody;

exports.Page = Page;
