import React__default from 'react';
import classnames from 'classnames';
import { useResizeObserver, Breakpoints } from '@jobber/hooks';
import { H as Heading } from './Heading-es.js';
import { T as Text } from './Text-es.js';
import { C as Content } from './Content-es.js';
import { M as Markdown } from './Markdown-es.js';
import { B as Button } from './Button-es.js';
import { M as Menu } from './Menu-es.js';
import { E as Emphasis } from './Emphasis-es.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-"};

function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
    const pageStyles = classnames(styles.page, styles[width]);
    const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
    const titleBarClasses = classnames(styles.titleBar, {
        [styles.small]: titleBarWidth > Breakpoints.smaller,
        [styles.medium]: titleBarWidth > Breakpoints.small,
        [styles.large]: titleBarWidth > Breakpoints.base,
    });
    const showMenu = moreActionsMenu.length > 0;
    const showActionGroup = showMenu || primaryAction || secondaryAction;
    if (primaryAction != undefined) {
        primaryAction = Object.assign({ fullWidth: true }, primaryAction);
    }
    if (secondaryAction != undefined) {
        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
    }
    if (secondaryAction != undefined) {
        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
    }
    return (React__default.createElement("div", { className: pageStyles },
        React__default.createElement(Content, null,
            React__default.createElement(Content, null,
                React__default.createElement("div", { className: titleBarClasses, ref: titleBarRef },
                    React__default.createElement("div", null,
                        typeof title === "string" && titleMetaData ? (React__default.createElement("div", { className: styles.titleRow },
                            React__default.createElement(Heading, { level: 1 }, title),
                            titleMetaData)) : typeof title === "string" ? (React__default.createElement(Heading, { level: 1 }, title)) : (title),
                        subtitle && (React__default.createElement("div", { className: styles.subtitle },
                            React__default.createElement(Text, { size: "large", variation: "subdued" },
                                React__default.createElement(Emphasis, { variation: "bold" },
                                    React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
                    showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
                        primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
                            React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction))))),
                        secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
                            React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction))))),
                        showMenu && (React__default.createElement("div", { className: styles.actionButton },
                            React__default.createElement(Menu, { items: moreActionsMenu })))))),
                intro && (React__default.createElement(Text, { size: "large" },
                    React__default.createElement(Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
            React__default.createElement(Content, null, children))));
}
const getActionProps = (actionProps) => {
    const buttonProps = Object.assign({}, actionProps);
    if (actionProps.ref)
        delete buttonProps.ref;
    return buttonProps;
};

export { Page as P };
