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 from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import TreeView from '@material-ui/lab/TreeView';
import TreeItem from '@material-ui/lab/TreeItem';
import Typography from '@material-ui/core/Typography';
import { ChevronDownIcon, ChevronRightIcon, ViewDashboardIcon, AdminALogo32Icon, MessageIcon, ContentFeedIcon, RawSourceIcon, BugIcon, OfficeFormsLogo16Icon, CloudUploadIcon } from '@fluentui/react-icons';
import { Link } from 'react-router-dom';
const useTreeItemStyles = makeStyles((theme) => ({
    root: {
        color: theme.palette.text.secondary,
        '&:hover > $content': {
            backgroundColor: theme.palette.action.hover
        },
        '&:focus > $content, &$selected > $content': {
            backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[300]})`,
            color: 'var(--tree-view-color)'
        },
        '&:focus > $marker, &$selected > $marker': {
            backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[300]})`,
            color: 'var(--tree-view-color)'
        },
        '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {
            backgroundColor: 'transparent'
        }
    },
    content: {
        color: theme.palette.text.secondary,
        paddingRight: theme.spacing(1),
        paddingLeft: theme.spacing(1),
        fontWeight: theme.typography.fontWeightMedium,
        '$expanded > &': {
            fontWeight: theme.typography.fontWeightRegular
        }
    },
    group: {
        marginLeft: 0,
        '& $content': {
            paddingLeft: theme.spacing(2)
        }
    },
    expanded: {},
    selected: {},
    label: {
        fontWeight: 'inherit',
        color: 'inherit'
    },
    labelRoot: {
        display: 'flex',
        alignItems: 'center',
        padding: theme.spacing(1.5, 0)
    },
    labelIcon: {
        marginRight: theme.spacing(2.5),
        fontSize: 16,
        color: theme.palette.secondary.main
    },
    labelText: {
        fontWeight: 'inherit',
        fontSize: 14,
        flexGrow: 1
    }
}));
const StyledTreeItem = (props) => {
    const classes = useTreeItemStyles();
    const { labelText, labelIcon: LabelIcon, labelInfo, color, bgColor, to, children } = props, other = __rest(props, ["labelText", "labelIcon", "labelInfo", "color", "bgColor", "to", "children"]);
    return (React.createElement(Link, { to: to, style: { textDecoration: 'none' } }, React.createElement(TreeItem, Object.assign({ label: React.createElement("div", { className: classes.labelRoot }, LabelIcon && (React.createElement(LabelIcon, { color: "inherit", className: classes.labelIcon })), React.createElement(Typography, { variant: "body2", className: classes.labelText }, labelText), React.createElement(Typography, { variant: "caption", color: "inherit" }, labelInfo)), style: {
            '--tree-view-color': color,
            '--tree-view-bg-color': bgColor
        }, classes: {
            root: classes.root,
            content: classes.content,
            expanded: classes.expanded,
            selected: classes.selected,
            group: classes.group,
            label: classes.label
        } }, other, { children: children }))));
};
StyledTreeItem.propTypes = {
    bgColor: PropTypes.string,
    color: PropTypes.string,
    labelIcon: PropTypes.elementType,
    labelInfo: PropTypes.string,
    labelText: PropTypes.string.isRequired
};
const useStyles = makeStyles({
    root: {
        height: 264,
        flexGrow: 1,
        maxWidth: 280
    }
});
export const FluentSideNav = (props) => {
    const classes = useStyles();
    const { data } = props;
    const renderedArray = data.map((nodes) => {
        const icons = {
            ViewDashboardIcon,
            AdminALogo32Icon,
            MessageIcon,
            ContentFeedIcon,
            RawSourceIcon,
            BugIcon,
            OfficeFormsLogo16Icon,
            CloudUploadIcon
        };
        return (React.createElement(StyledTreeItem, { key: nodes.nodeId, nodeId: nodes.nodeId, labelText: nodes.labelText, labelIcon: typeof nodes.labelIcon === 'string'
                ? icons[nodes.labelIcon]
                : nodes.labelIcon, to: nodes.to !== '' && nodes.to, children: nodes.children &&
                nodes.children.map((nodes) => {
                    return (React.createElement(StyledTreeItem, { key: nodes.nodeId, nodeId: nodes.nodeId, labelText: nodes.labelText, labelIcon: typeof nodes.labelIcon === 'string'
                            ? icons[nodes.labelIcon]
                            : nodes.labelIcon, to: nodes.to !== '' && nodes.to }));
                }) }));
    });
    return (React.createElement(TreeView, { className: classes.root, defaultCollapseIcon: React.createElement(ChevronDownIcon, null), defaultExpandIcon: React.createElement(ChevronRightIcon, null), defaultEndIcon: React.createElement("div", { style: { width: 24 } }) }, renderedArray));
};
//# sourceMappingURL=FluentSideNav.js.map