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 { AppBar, makeStyles, Toolbar, Typography, IconButton, useMediaQuery, useTheme } from '@material-ui/core';
import clsx from 'clsx';
import { WaffleIcon, CollapseMenuIcon } from '@fluentui/react-icons';
import { BreadCrumbMenu } from '../../UI/inputs/link/BreadCrumbMenu';
import { AmbientProjectSwitcher } from './AmbientProjectSwitcher';
import ShellDropdown from './ShellDropdown';
import { LanguageSwitcher } from './LanguageSwitcher';
import { HelpCenter } from './HelpCenter';
import { SiteHeaderRightComponentTarget } from './SiteHeaderRightComponent';
import PropTypes from 'prop-types';
import { useBuildEnvironment, APP_RIBBON_SPACE } from './useBuildEnvironment';
import { EnvironmentRibbon } from './EnvironmentRibbon';
const useStyles = makeStyles((theme) => {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    return ({
        root: {
            color: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.appBar) === null || _b === void 0 ? void 0 : _b.contrastText,
            zIndex: ((_c = theme === null || theme === void 0 ? void 0 : theme.zIndex) === null || _c === void 0 ? void 0 : _c.drawer) + 1
            // Assume the drawer is always expanded unless the screen is too small for it and inset the left to account for it
        },
        spacer: {
            flex: 1
        },
        headerSpacer: {
            padding: 0,
            minHeight: ({ appRibbonSpace }) => 56 + appRibbonSpace
        },
        toolbar: {
            padding: 0,
            minHeight: theme.spacing(6)
        },
        appLaunch: {
            color: (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.getContrastText((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e.primary) === null || _f === void 0 ? void 0 : _f.main)
        },
        avatar: {
            width: 25,
            height: 25,
            backgroundColor: (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.secondary) === null || _h === void 0 ? void 0 : _h.main
        },
        search: {
            marginLeft: theme.spacing(2),
            marginTop: theme.spacing(-1.35)
        },
        children: {
            flex: 1,
            minWidth: 5
        }
    });
}, { name: 'SiteHeader' });
/**
 * A spacing component with the same height as the SiteHeader
 */
export const SiteHeaderSpacer = (props) => {
    const buildEnv = useBuildEnvironment();
    const classes = useStyles({
        appRibbonSpace: buildEnv ? APP_RIBBON_SPACE : 0
    });
    const { className } = props;
    return React.createElement("div", { className: clsx(className, classes.headerSpacer) });
};
/**
 * Site header including app bar
 */
const SiteHeader = (props) => {
    const classes = useStyles(props);
    const { className, returnTo, appContent, userAvatar, siteName, breadCrumbRoot = 'home', color = 'primary', setAppSwitcherOpen, breadCrumbAltLabelList, currentLocation, switcherData, selectedItem, switcherWidth, hideAppLaunch, languages, backgroundColor, hideLanguageSwitcher = false, hideHelpCenter = false } = props, other = __rest(props, ["className", "returnTo", "appContent", "userAvatar", "siteName", "breadCrumbRoot", "color", "setAppSwitcherOpen", "breadCrumbAltLabelList", "currentLocation", "switcherData", "selectedItem", "switcherWidth", "hideAppLaunch", "languages", "backgroundColor", "hideLanguageSwitcher", "hideHelpCenter"]);
    const theme = useTheme();
    const mobile = useMediaQuery(theme.breakpoints.up('sm'));
    return (React.createElement(React.Fragment, null, React.createElement(AppBar, Object.assign({ elevation: 0, position: "fixed", color: color }, other, { className: className, classes: { root: classes.root } }), React.createElement(EnvironmentRibbon, null), React.createElement(Toolbar, { className: classes.toolbar }, mobile && !hideAppLaunch && (React.createElement(IconButton, { className: classes.appLaunch, "aria-label": "App Launcher Menu", onClick: () => setAppSwitcherOpen('desktop', true) }, React.createElement(WaffleIcon, null))), !mobile && (React.createElement(IconButton, { className: classes.appLaunch, "aria-label": "App Launcher Menu", onClick: () => setAppSwitcherOpen('desktop', true) }, React.createElement(CollapseMenuIcon, null))), React.createElement(Typography, { component: "h1", variant: "h6", style: { marginLeft: hideAppLaunch && 16 } }, siteName), mobile && (React.createElement("div", { style: { marginLeft: 70 } }, React.isValidElement(breadCrumbRoot) ? (breadCrumbRoot) : breadCrumbRoot && typeof breadCrumbRoot === 'object' && (breadCrumbRoot.data || breadCrumbRoot.componentName) ? (React.createElement(ShellDropdown, { componentName: breadCrumbRoot.componentName, data: breadCrumbRoot.data, value: breadCrumbRoot.value, onChange: breadCrumbRoot.onChange, optionLabelDisplayFunction: breadCrumbRoot.optionLabelDisplayFunction, groupBy: breadCrumbRoot.groupBy, placeholder: breadCrumbRoot.placeholder, className: breadCrumbRoot.className, classProps: breadCrumbRoot.classProps })) : (React.createElement(BreadCrumbMenu, { color: "primary", root: breadCrumbRoot, breadCrumbAltLabelList: breadCrumbAltLabelList })))), React.createElement("div", { className: classes.children }, appContent), switcherData && (React.createElement(AmbientProjectSwitcher, { data: switcherData, selectedItem: selectedItem, width: switcherWidth, backgroundColor: backgroundColor })), !mobile && !hideAppLaunch && (React.createElement(IconButton, { className: classes.appLaunch, "aria-label": "App Launcher Menu", onClick: () => setAppSwitcherOpen('mobile', true) }, React.createElement(WaffleIcon, null))), React.createElement("div", { className: classes.additionalRightComponent }, React.createElement(SiteHeaderRightComponentTarget, null)), !hideHelpCenter && React.createElement(HelpCenter, null), !hideLanguageSwitcher && React.createElement(LanguageSwitcher, { languages: languages }), React.createElement("div", null, userAvatar))), React.createElement(SiteHeaderSpacer, { className: className })));
};
export default SiteHeader;
SiteHeader.propTypes = {
    breadCrumbRoot: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.element,
        PropTypes.node,
        PropTypes.object
    ]),
    /**
     * Passes the background color on the project switcher (default: theme secondary)
     */
    backgroundColor: PropTypes.string
};
//# sourceMappingURL=SiteHeader.js.map