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 { ChevronDownIcon, ChevronUpIcon } from '@fluentui/react-icons';
import { Collapse, createStyles, List, ListItemIcon, ListItemText, makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import React, { useContext, useEffect, useState } from 'react';
import { useActions } from '../../../hooks/useActions';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
import { redirectToLinkOnClick } from '../../../utilities/menus/redirectToLink';
import { AppMenuItemComponent } from './AppMenuItemComponent';
import { apiMutate } from '../../../utilities/useAxiosMutate';
import { useTranslation } from 'react-i18next';
import { ConfigService } from '../../../configService';
// React runtime PropTypes
const AppMenuItemPropTypes = {
    id: PropTypes.string,
    label: PropTypes.string.isRequired,
    link: PropTypes.string,
    tenantHref: PropTypes.string,
    icon: PropTypes.elementType,
    iconName: PropTypes.string,
    image: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.object),
    indent: PropTypes.string,
    redirectInfo: PropTypes.string,
    params: PropTypes.object,
    menuItemId: PropTypes.string,
    menuStructureId: PropTypes.number,
    parentId: PropTypes.number,
    productId: PropTypes.number,
    isActive: PropTypes.bool,
    roleIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
    getAccessToken: PropTypes.func,
    childrenIcons: PropTypes.bool,
    isChild: PropTypes.bool,
    childIndex: PropTypes.number,
    sidebarExpanded: PropTypes.bool,
    devicesHiddenOn: PropTypes.arrayOf(PropTypes.string),
    user: PropTypes.object,
    tenantSsoId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
const useStyles = makeStyles((theme) => createStyles({
    menuItem: {
        '&.active': {
            background: 'rgba(0, 0, 0, 0.08)',
            '& .MuiListItemIcon-root': { marginLeft: theme.spacing(2) }
        }
    },
    menuItemIcon: {
        minWidth: theme.spacing(5)
    },
    item: {
        width: 254,
        whiteSpace: 'normal',
        paddingLeft: (props) => (props === null || props === void 0 ? void 0 : props.isChild) && props.sidebarExpanded
            ? `calc(16px + ${16 * (props.childIndex !== undefined ? props.childIndex : 0)}px)`
            : null
    },
    indent: {},
    icon: {
        width: theme.spacing(3),
        height: theme.spacing(3),
        color: theme.palette.secondary.dark
    },
    expand: {
        // marginRight: theme.spacing(1),
        visibility: (props) => (props.sidebarExpanded ? 'visible' : 'hidden')
    },
    images: {
        width: theme.spacing(3.5),
        height: theme.spacing(3.5)
    }
}));
export const AppMenuItem = (props) => {
    const { childrenIcons = true, isChild = false, childIndex = 0, label, link, tenantHref, icon, image, getAccessToken, indent, items = [], redirectInfo, sidebarExpanded, user, params, tenantSsoId } = props, other = __rest(props, ["childrenIcons", "isChild", "childIndex", "label", "link", "tenantHref", "icon", "image", "getAccessToken", "indent", "items", "redirectInfo", "sidebarExpanded", "user", "params", "tenantSsoId"]);
    const classes = useStyles(props);
    const isExpandable = (items === null || items === void 0 ? void 0 : items.length) > 0;
    const [open, setOpen] = useState(false);
    const { triggerMultipleActions } = useActions();
    const { t } = useTranslation();
    const handleClick = async () => {
        var _a;
        let url = redirectInfo;
        if (url && tenantSsoId) {
            const response = await apiMutate(ConfigService.securityV1ApiUrl, `sso/${tenantSsoId}`, { method: 'get' });
            if (!response)
                return;
            url = `${url}${response.data.urlParams}`;
        }
        if (url) {
            redirectToLinkOnClick(url, getAccessToken, user);
        }
        if ((_a = params === null || params === void 0 ? void 0 : params.Action) === null || _a === void 0 ? void 0 : _a.length) {
            triggerMultipleActions(params.Action);
        }
        setOpen(!open);
    };
    const MenuItemRoot = (React.createElement(AppMenuItemComponent, { className: clsx(indent ? classes.menuItem : classes.indent, classes.item), link: items.length ? '' : link, tenantHref: items.length ? undefined : tenantHref, onClick: handleClick, "aria-expanded": isExpandable ? open : null, params: Object.assign(Object.assign({}, other), { label, params }), isChild: isChild }, (!!icon || !!image) && ((isChild && childrenIcons) || !isChild) && (React.createElement(ListItemIcon, { className: classes.menuItemIcon }, icon ? (React.createElement("div", { className: classes.icon }, React.createElement(FluentIcon, { component: icon }))) : (React.createElement("img", { src: image, alt: label, className: classes.images })))), React.createElement(ListItemText, { primary: t(label), inset: !icon && !image, primaryTypographyProps: { variant: 'body1' } }), isExpandable &&
        (open ? (React.createElement("div", { className: classes.expand }, React.createElement(FluentIcon, { size: 'small', component: ChevronUpIcon, id: `udpRecord-AppMenuItem-FluentIcon-Up-${label}`, udprecordid: `udpRecord-AppMenuItem-FluentIcon-Up-${label}` }))) : (React.createElement("div", { className: classes.expand }, React.createElement(FluentIcon, { size: 'small', component: ChevronDownIcon, id: `udpRecord-AppMenuItem-FluentIcon-Down-${label}`, udprecordid: `udpRecord-AppMenuItem-FluentIcon-Down-${label}` }))))));
    const MenuItemChildren = isExpandable ? (React.createElement(Collapse, { in: open, timeout: "auto", unmountOnExit: true }, React.createElement(List, null, items.map((item, index) => (React.createElement(AppMenuItem, Object.assign({}, item, { childrenIcons: childrenIcons, isChild: true, key: index, childIndex: childIndex + 1, sidebarExpanded: sidebarExpanded, user: user }))))))) : null;
    return (React.createElement("li", null, MenuItemRoot, MenuItemChildren));
};
AppMenuItem.propTypes = AppMenuItemPropTypes;
//# sourceMappingURL=AppMenuItem.js.map