import React from 'react';
import { makeStyles, Typography, IconButton, AppBar, Toolbar } from '@material-ui/core';
import { WaffleIcon, ForwardIcon } from '@fluentui/react-icons';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
import { FluentButton } from '../../../UI/inputs/buttons/FluentButton';
import { useTranslation } from 'react-i18next';
import { useUser } from '../../../utilities/auth/useUser';
import { ConfigService } from '../../../configService';
const useStyles = makeStyles((theme) => ({
    main: {
        flexGrow: 1,
        padding: '0 24px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    secondary: {},
    appIcon: {
        width: 24,
        height: 24,
        color: theme.palette.text.primary
    },
    appLink: {
        display: 'flex',
        flexDirection: 'row'
    },
    arrow: {},
    arrowIcon: {
        width: 12,
        height: 12
    },
    linkTitle: {
        marginRight: theme.spacing(1)
    },
    toolbar: {
        padding: 0,
        minHeight: theme.spacing(6)
    }
}));
const FUIAppHeader = (props) => {
    const classes = useStyles();
    const { onClose, unityUrl } = props;
    const { t, i18n } = useTranslation();
    const user = useUser();
    const openInNewTab = (url) => {
        const newWindow = window.open(url + `?tenantId=${user.currentTenantId}`, '_blank', 'noopener,noreferrer');
        if (newWindow)
            newWindow.opener = null;
    };
    return (React.createElement(AppBar, { elevation: 0, color: "transparent", position: "static" }, React.createElement(Toolbar, { className: classes.toolbar }, React.createElement("div", { className: classes.main }, React.createElement(IconButton, { className: classes.menuButton, edge: "start", onClick: onClose }, React.createElement(FluentIcon, { component: WaffleIcon, className: classes.appIcon })), ConfigService.config.UNITY_PRODUCT_ID != 1 && (React.createElement(FluentButton, { className: classes.appLink, onClick: () => openInNewTab(unityUrl) }, React.createElement("div", { className: classes.linkTitle }, React.createElement(Typography, { className: classes.secondary, variant: "body1" }, t('Back to Unity'))), React.createElement("div", { className: classes.arrow }, React.createElement(FluentIcon, { component: ForwardIcon, className: classes.arrowIcon }))))))));
};
export default FUIAppHeader;
//# sourceMappingURL=FUIAppHeader.js.map