import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { SidePanel, useSidePanel } from '@workday/canvas-kit-preview-react/side-panel';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { Expandable } from '@workday/canvas-kit-react/expandable';
import { SystemIcon } from '@workday/canvas-kit-react/icon';
import { Flex } from '@workday/canvas-kit-react/layout';
import { Menu } from '@workday/canvas-kit-react/menu';
import { Heading, Subtext } from '@workday/canvas-kit-react/text';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
import { birthdayIcon, checkIcon, ribbonIcon, } from '@workday/canvas-system-icons-web';
import { system } from '@workday/canvas-tokens-web';
const data = {
    bestsellers: {
        icon: ribbonIcon,
        title: 'Best Sellers',
        subtitle: 'Award winning sweet treats',
        items: ['Mango Coco Sago', 'Matcha Creme Pie', 'Key Lime Cheesecake', 'Tiramisu'],
    },
    cakes: {
        icon: birthdayIcon,
        title: 'Custom Cakes',
        subtitle: 'To celebrate your life milestones',
        items: ['Anniversary', 'Birthday', 'Graduation', 'Wedding'],
    },
};
const stylesOverride = {
    navContainer: createStyles({
        height: px2rem(800),
        positio: 'relative',
        backgroundColor: system.color.bg.alt.default,
    }),
    heading: createStyles({
        margin: '0',
    }),
    toggleBtn: createStyles({
        top: '0',
    }),
    accordionContainer: createStyles({
        listStyle: 'none',
        flexDirection: 'column',
        rowGap: '0',
        paddingInlineStart: '0',
    }),
    accordionIcon: createStyles({
        verticalAlign: 'middle',
        padding: system.padding.xxs,
    }),
    accordionSubText: createStyles({
        margin: '0',
    }),
    listContainer: createStyles({
        listStyle: 'none',
        padding: system.padding.md,
    }),
    compactListContainer: createStyles({
        listStyle: 'none',
        padding: system.padding.md,
        flexDirection: 'column',
        marginBlockStart: system.gap.xl,
    }),
    links: createStyles({
        textDecoration: 'none',
        padding: system.padding.md,
    }),
    linkCheck: createStyles({
        marginInlineStart: 'auto',
    }),
    flyOut: createStyles({
        marginBlockStart: '8rem',
    }),
};
const Accordion = ({ config }) => {
    const [currentPage, setCurrentPage] = React.useState('');
    const handleClick = (e) => {
        e.preventDefault();
        const target = e.target;
        setCurrentPage(target.textContent || '');
    };
    return (_jsxs(Expandable, { children: [_jsxs(Expandable.Target, { children: [_jsx(SystemIcon, { cs: stylesOverride.accordionIcon, icon: config.icon }), _jsxs(Expandable.Title, { children: [config.title, _jsx(Subtext, { size: "medium", cs: stylesOverride.accordionSubText, children: config.subtitle })] }), _jsx(Expandable.Icon, { iconPosition: "end" })] }), _jsx(Expandable.Content, { as: "ul", cs: stylesOverride.listContainer, children: config.items.map((i) => {
                    return (_jsx("li", { children: _jsxs(Flex, { as: "a", href: "#", "aria-current": i === currentPage ? 'true' : undefined, className: stylesOverride.links, onClick: handleClick, children: [i, i === currentPage && _jsx(SystemIcon, { icon: checkIcon, cs: stylesOverride.linkCheck })] }) }, i));
                }) })] }));
};
const IconButtonMenu = ({ config }) => {
    return (_jsxs(Menu, { children: [_jsx(Tooltip, { title: config.title, placement: "right", children: _jsx(Menu.Target, { as: TertiaryButton, children: _jsx(SystemIcon, { icon: config.icon }) }) }), _jsx(Menu.Popper, { placement: "right", children: _jsx(Menu.Card, { cs: stylesOverride.flyOut, children: _jsx(Menu.List, { children: config.items.map((i) => (_jsx(Menu.Item, { children: i }, i))) }) }) })] }));
};
const CompactView = () => {
    return (_jsxs(Flex, { as: "ul", cs: stylesOverride.compactListContainer, children: [_jsx(Flex.Item, { as: "li", children: _jsx(IconButtonMenu, { config: data.bestsellers }) }), _jsx(Flex.Item, { as: "li", children: _jsx(IconButtonMenu, { config: data.cakes }) })] }));
};
const ExpandedView = () => {
    return (_jsxs(Flex, { as: "ul", cs: stylesOverride.accordionContainer, children: [_jsx(Flex.Item, { as: "li", children: _jsx(Accordion, { config: data.bestsellers }) }), _jsx(Flex.Item, { as: "li", children: _jsx(Accordion, { config: data.cakes }) })] }));
};
export const SideBarContent = () => {
    const { expanded, panelProps, labelProps, controlProps } = useSidePanel();
    return (_jsxs(SidePanel, { as: "div", touched: panelProps.touched, expanded: panelProps.expanded, children: [_jsx(Heading, { size: "small", cs: stylesOverride.heading, ...labelProps, hidden: !expanded ? true : undefined, children: "Cake or Death Bakery" }), _jsx(SidePanel.ToggleButton, { cs: stylesOverride.toggleBtn, ...controlProps }), expanded ? _jsx(ExpandedView, {}) : _jsx(CompactView, {})] }));
};
export const WithNavigation = () => {
    return (_jsx(Flex, { as: "nav", cs: stylesOverride.navContainer, children: _jsx(SideBarContent, {}) }));
};
