import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import MenuPage from './MenuPage';
import { makeStyles, Typography } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1
        // padding: theme.spacing(1),
    }
}));
function buildInnerMenuFromItems(items = [], menuTitle, idPrefix = 'custom', showItemCount = false, itemCountAccessor = null) {
    const idMap = {};
    const views = (items || []).map((item, idx) => {
        var _a, _b, _c, _d, _e;
        const itemKey = (_c = (_b = (_a = item.id) !== null && _a !== void 0 ? _a : item.ID) !== null && _b !== void 0 ? _b : item.groupID) !== null && _c !== void 0 ? _c : idx;
        const menuStructureId = `${idPrefix}-${itemKey}`;
        // compute optional count using accessor
        let itemCount = null;
        if (showItemCount && typeof itemCountAccessor === 'function') {
            try {
                const cnt = itemCountAccessor(item);
                if (cnt !== undefined && cnt !== null) {
                    itemCount = cnt;
                }
            }
            catch (e) { }
        }
        idMap[menuStructureId] = item;
        item.__menuStructureId = menuStructureId;
        item.__itemKey = itemKey;
        const parametersObj = {
            FluentIcon: 'PageListIcon',
            PageId: '',
            defaultDisplay: 'expanded'
        };
        if (itemCount !== null && itemCount !== undefined) {
            parametersObj.itemCount = itemCount;
        }
        return {
            menuStructureId,
            menuItemInstance: {
                menuItemInstanceId: `${idPrefix}-item-${itemKey}`,
                clusterId: null,
                menuItemId: null,
                name: (_d = item.name) !== null && _d !== void 0 ? _d : '',
                parameters: JSON.stringify(parametersObj),
                isActive: true,
                roleIds: [],
                groupIds: [],
                tenantSsoId: null,
                parentMenuItemInstanceId: null,
                items: null
            },
            title: (_e = item.name) !== null && _e !== void 0 ? _e : '',
            order: idx,
            parentId: null,
            unsubscribed: false,
            menuItemInstanceStructures: []
        };
    });
    const innerMenu = {
        // set the inner menu name only when client provided a menuTitle; leave blank when not provided
        name: menuTitle ? menuTitle : '',
        menuItemInstanceStructureViews: views
    };
    return { innerMenu, idMap };
}
const CustomMenuPage = ({ items = [], className = '', menuTitle, mainContent: clientMainContent, idPrefix = 'custom', showItemCount = false, itemCountAccessor = null, allowMissingPageParam = false, searchParamsTransformer = null }) => {
    const classes = useStyles();
    const { innerMenu, idMap } = useMemo(() => buildInnerMenuFromItems(items, menuTitle, idPrefix, showItemCount, itemCountAccessor), [items, menuTitle, idPrefix, showItemCount, itemCountAccessor]);
    // Expect client application to provide mainContent. If not provided, render an empty container.
    const clientContent = clientMainContent
        ? ({ selectedNode, menuItemsList }) => clientMainContent({
            selectedNode,
            menuItemsList,
            idMap,
            items,
            classes,
            className
        })
        : ({ selectedNode, menuItemsList }) => (React.createElement("div", { className: `${classes.root} ${className}` }));
    const composedMainContent = ({ selectedNode, menuItemsList }) => (React.createElement("div", { className: `${classes.root} ${className}` }, clientContent({ selectedNode, menuItemsList })));
    return (React.createElement(MenuPage, { innerMenuOverride: innerMenu, mainContent: composedMainContent, menuTitle: menuTitle, allowMissingPageParam: allowMissingPageParam, searchParamsTransformer: searchParamsTransformer }));
};
CustomMenuPage.propTypes = {
    items: PropTypes.array,
    className: PropTypes.string,
    menuTitle: PropTypes.string,
    mainContent: PropTypes.func,
    idPrefix: PropTypes.string,
    showItemCount: PropTypes.bool,
    itemCountAccessor: PropTypes.func,
    allowMissingPageParam: PropTypes.bool,
    searchParamsTransformer: PropTypes.func
};
export default CustomMenuPage;
//# sourceMappingURL=CustomMenuPage.js.map