'use strict';

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 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 = 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;
    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.createElement("div", { className: pageStyles },
        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))))),
                        secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
                            React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction))))),
                        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))));
}
const getActionProps = (actionProps) => {
    const buttonProps = Object.assign({}, actionProps);
    if (actionProps.ref)
        delete buttonProps.ref;
    return buttonProps;
};

exports.Page = Page;
