import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { createRef, forwardRef, useCallback, useMemo, useEffect } from 'react';
import { focusHeadingOrContainer } from '../../utils';
import { useConfiguration, useConsolidatedRef, useUID } from '../../hooks';
import Button from '../Button';
import Flex from '../Flex';
import Icon from '../Icon';
import MenuButton from '../MenuButton';
import Text from '../Text';
import Progress from '../Progress';
import { StyledTemplate, StyledTemplateRow, StyledPageArticle, StyledArticleHeader, StyledPageActionCol, StyledPageTitle, StyledMenuColumn, StyledCategoryHeadingRow, StyledCategoryIconBlock, StyledNav, StyledNavList, StyledNavGroup, StyledNavGroupList, StyledNavGroupHeader, StyledNavItem, StyledSkipNavigation } from './CategorySubPage.styles';
const NavItem = ({ item: { href, text, active, ...restProps } }) => {
    const isAnchor = !!href;
    return (_jsx(StyledNavItem, { as: 'li', selected: !!active, tabType: 'horizontal', "aria-current": active ? 'page' : undefined, children: _jsx(Button, { ...restProps, href: isAnchor ? href : undefined, variant: 'text', children: text }) }));
};
const NavGroup = ({ item }) => {
    const mappedGroupedItems = useMemo(() => {
        return item.items.map(groupedItem => {
            const key = groupedItem.text;
            return _jsx(NavItem, { item: groupedItem }, key);
        });
    }, [item.items]);
    const titledGroup = useMemo(() => {
        return !!item.title && !!item.items.length;
    }, [item.title, item.items]);
    const anonGroup = useMemo(() => {
        return !item.title && item.items.length > 1;
    }, [item.title, item.items]);
    const groupLabelId = useUID();
    if (titledGroup) {
        return (_jsxs(StyledNavGroup, { children: [_jsx(StyledNavGroupHeader, { variant: 'h2', id: groupLabelId, children: item.title }), _jsx(StyledNavGroupList, { "aria-labelledby": groupLabelId, children: mappedGroupedItems })] }));
    }
    if (anonGroup) {
        return (_jsx(StyledNavGroup, { children: _jsx("ul", { children: mappedGroupedItems }) }));
    }
    if (item.items.length === 1) {
        return _jsx(NavItem, { item: item.items[0] });
    }
    return null;
};
const CategorySubPage = forwardRef(function CategorySubPage({ viewLoading = false, category, categoryIcon, navItemGroups, pageTitle, pageActions, region, maxActions = 3, ...restProps }, ref) {
    const articleRef = createRef();
    const templateRef = useConsolidatedRef(ref);
    const { loadedRef } = useConfiguration();
    useEffect(() => {
        if (!templateRef.current)
            return;
        if (loadedRef.current) {
            focusHeadingOrContainer(templateRef.current, category);
        }
        else {
            loadedRef.current = true;
        }
    }, [category]);
    const mappedAction = useCallback((action) => {
        const { id, text, icon, label, ...rest } = action;
        return (_createElement(Button, { ...rest, key: id, icon: !!icon && !text, label: label || text },
            !!icon && _jsx(Icon, { name: icon }),
            !!text && text));
    }, []);
    return (_jsx(StyledTemplate, { children: _jsxs(Flex, { ...restProps, ref: templateRef, as: StyledTemplateRow, container: { alignItems: 'stretch', wrap: 'nowrap' }, children: [_jsxs(StyledMenuColumn, { children: [_jsx(StyledSkipNavigation, { onClick: () => {
                                if (articleRef.current)
                                    articleRef.current.focus();
                            }, children: "Skip to page content" }), _jsxs(Flex, { as: StyledCategoryHeadingRow, container: { alignItems: 'center' }, children: [categoryIcon && (_jsx(Flex, { as: StyledCategoryIconBlock, container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: categoryIcon }) })), _jsx(Text, { variant: 'h1', children: category })] }), _jsx(StyledNav, { children: _jsx(StyledNavList, { children: navItemGroups.map((navItem, index) => {
                                    const key = 'title' in navItem ? navItem.title : `navItem${index}`;
                                    return _jsx(NavGroup, { item: navItem }, key);
                                }) }) })] }), _jsxs(Flex, { as: StyledPageArticle, item: { grow: 1 }, ref: articleRef, "aria-label": pageTitle || 'Main Content', tabIndex: 0, children: [viewLoading && _jsx(Progress, { placement: 'local' }), !viewLoading && (_jsxs(_Fragment, { children: [(pageTitle || pageActions) && (_jsxs(Flex, { as: StyledArticleHeader, container: {
                                        justify: 'between',
                                        alignItems: 'center',
                                        wrap: 'wrap'
                                    }, children: [pageTitle && _jsx(StyledPageTitle, { children: pageTitle }), pageActions && !!pageActions.length && (_jsxs(_Fragment, { children: [pageActions.length <= maxActions && (_jsx(StyledPageActionCol, { children: pageActions.reverse().map(mappedAction) })), pageActions.length > maxActions && (_jsxs(StyledPageActionCol, { children: [_jsx(MenuButton, { text: 'Actions', menu: {
                                                                items: pageActions
                                                                    .slice(maxActions - 1)
                                                                    .map(({ id, text, onClick, ...rest }) => ({
                                                                    id,
                                                                    primary: text,
                                                                    onClick,
                                                                    ...rest
                                                                }))
                                                            } }), pageActions
                                                            .slice(0, maxActions - 1)
                                                            .reverse()
                                                            .map(mappedAction)] }))] }))] })), region] }))] })] }) }));
});
export default CategorySubPage;
//# sourceMappingURL=CategorySubPage.js.map