import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Flex, Grid } from '@workday/canvas-kit-react/layout';
import { Heading } from '@workday/canvas-kit-react/text';
import { SecondaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { GlobalHeader } from '../GlobalHeader';
import { SideBarContent } from '../SidePanelWithNavigation';
import { BreadcrumbNavRegion } from './BreadcrumbNavRegion';
const gridLayoutStyles = createStyles({
    gridTemplateAreas: `'Header Header Header Header'
    'SideBar BodyContent BodyContent BodyContent'
    'Footer Footer Footer Footer'`,
    gridGap: system.space.x4,
    gridTemplateColumns: '1fr 9fr',
    gridTemplateRows: `auto ${px2rem(800)} auto`,
});
const regionStyles = createStyles({
    border: `${px2rem(1)} solid ${system.color.border.contrast.default}`,
    borderRadius: system.shape.x2,
    padding: system.space.x4,
});
const verticalFlexStyles = createStyles({
    flexDirection: 'column',
    gap: system.space.x4,
});
const headingStyles = createStyles({
    margin: system.space.zero,
});
export const FullPageDemo = () => {
    const [notifications, setNotifications] = React.useState(0);
    function handleAdd() {
        setNotifications(prev => prev + 1);
    }
    function handleClear() {
        setNotifications(0);
    }
    return (_jsxs(Grid, { cs: gridLayoutStyles, children: [_jsx(Grid, { as: "header", gridArea: "Header", cs: regionStyles, children: _jsx(GlobalHeader, { notifications: notifications }) }), _jsx(Grid, { as: "nav", gridArea: "SideBar", cs: regionStyles, children: _jsx(Flex, { cs: verticalFlexStyles, children: _jsx(SideBarContent, {}) }) }), _jsx(Grid, { as: "main", gridArea: "BodyContent", cs: regionStyles, children: _jsxs(Flex, { cs: verticalFlexStyles, children: [_jsx(BreadcrumbNavRegion, {}), _jsxs(Flex, { gap: system.space.x4, children: [_jsx(SecondaryButton, { onClick: handleAdd, children: "Add notification" }), _jsx(TertiaryButton, { onClick: handleClear, children: "Clear" })] }), _jsx(Heading, { as: "h1", size: "large", cs: headingStyles, children: "Heading Level 1" }), _jsx(Heading, { size: "medium", cs: headingStyles, children: "Heading Level 2" }), _jsx(Heading, { as: "h3", size: "small", cs: headingStyles, children: "Heading Level 3" })] }) }), _jsx(Grid, { as: "footer", gridArea: "Footer", cs: regionStyles, children: _jsx(Heading, { size: "small", cs: headingStyles, children: "Page Footer" }) })] }));
};
