var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useState, useCallback } from 'react';
import { makeStyles, Toolbar, lighten } from '@material-ui/core';
import MiniCollapsibleSidebar from './MiniCollapsibleSidebar';
import { SidebarCollapseButton } from './SidebarCollapseButton';
import { AppMenu } from '../../UI/navigation/menus/AppMenu';
import { useShellStore } from '../../stores/shellStore';
import { useBuildEnvironment, APP_RIBBON_SPACE } from './useBuildEnvironment';
import { MenuLoader } from '../../UI/feedback/MenuLoader';
const useStyles = makeStyles((theme) => {
    var _a, _b, _c;
    return ({
        root: {
            marginTop: 400
        },
        paper: {
            backgroundColor: ((_a = theme === null || theme === void 0 ? void 0 : theme.getThemeData()) === null || _a === void 0 ? void 0 : _a.mode) === 'dark'
                ? ''
                : lighten((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c.main, 0.9),
            overflowX: 'hidden'
        },
        list: {
            flex: 1,
            paddingTop: 0,
            overflowY: 'auto',
            WebkitOverflowScrolling: 'touch'
        },
        spacer: {
            flex: 1,
            minHeight: theme.spacing(2)
        },
        footer: {},
        toolbar: {
            padding: 0,
            minHeight: ({ appRibbonSpace }) => theme.spacing(6) + appRibbonSpace
        }
    });
}, { name: 'NavigationSidebar' });
const NavigationSidebar = (props) => {
    const buildEnv = useBuildEnvironment();
    const classes = useStyles({ appRibbonSpace: buildEnv ? APP_RIBBON_SPACE : 0 });
    const { data, toggleExpandClick, navMenuHoverOn, user, toggle = true, useGlobalState = false, leftMenuLoading = false } = props, other = __rest(props, ["data", "toggleExpandClick", "navMenuHoverOn", "user", "toggle", "useGlobalState", "leftMenuLoading"]);
    const [expanded, setExpanded] = useState(true);
    const { navigationExpanded, setNavigationExpanded } = useShellStore();
    let navExpanded = useGlobalState ? navigationExpanded : expanded;
    const [hoverExpand, setHoverExpand] = useState(false);
    // ** Remove for now to deal with programmatic toggle **
    // const wide = useMediaQuery(theme.breakpoints.up('sm'))
    // useEffect(() => {
    //   // Set the bar to be expanded/collapsed depending on the breakpoint size
    //   // This works on load and also when resizing crosses the breakpoint
    //   setExpanded(wide)
    // }, [wide])
    const handleHoverToggle = () => {
        if (!navExpanded && navMenuHoverOn) {
            setHoverExpand(true);
        }
    };
    const handleHoverLeave = () => {
        if (!navExpanded && navMenuHoverOn) {
            setHoverExpand(false);
        }
    };
    const handleToggleClick = useCallback(() => {
        if (useGlobalState) {
            setNavigationExpanded(!navigationExpanded);
        }
        else {
            setExpanded((expanded) => !expanded);
        }
    }, [setNavigationExpanded, useGlobalState, navigationExpanded]);
    return (React.createElement(MiniCollapsibleSidebar, Object.assign({ classes: { root: classes.root, paper: classes.paper }, expanded: navExpanded || hoverExpand, onMouseEnter: handleHoverToggle, onMouseLeave: handleHoverLeave, PaperProps: { elevation: 0, variant: 'outlined' } }, other), React.createElement(Toolbar, { className: classes.toolbar }), toggle && (React.createElement(SidebarCollapseButton, { id: "udpRecord-NavigationSidebar", udprecordid: "udpRecord-NavigationSidebar", expanded: navExpanded, onClick: handleToggleClick })), leftMenuLoading || !data ?
        React.createElement(MenuLoader, { numOfPlaceholderNodes: 6 })
        :
            React.createElement(AppMenu, { menuItems: data, sidebarExpanded: navExpanded, user: user })));
};
export default NavigationSidebar;
//# sourceMappingURL=NavigationSidebar.js.map