import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { action } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { AclAdmin, Doc } from '../../../fields/Doc';
import { StrCast } from '../../../fields/Types';
import { GetEffectiveAcl } from '../../../fields/util';
import { Utils } from '../../../Utils';
import { DocumentManager } from '../../util/DocumentManager';
import { SelectionManager } from '../../util/SelectionManager';
import { SettingsManager } from '../../util/SettingsManager';
import { SharingManager } from '../../util/SharingManager';
import { UndoManager } from '../../util/UndoManager';
import { CollectionDockingView } from '../collections/CollectionDockingView';
import { ContextMenu } from '../ContextMenu';
import { DashboardView } from '../DashboardView';
import { Borders, Colors } from '../global/globalEnums';
import { MainView } from '../MainView';
import './TopBar.scss';

/**
 * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
 * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard.
 */
@observer
export class TopBar extends React.Component {
    navigateToHome = () => {
        CollectionDockingView.Instance?.CaptureThumbnail()?.then(() => {
            Doc.ActivePage = 'home';
            DashboardView.closeActiveDashboard(); // bcz: if we do this, we need some other way to keep track, for user convenience, of the last dashboard in use
        });
    };
    render() {
        const activeDashboard = Doc.ActiveDashboard;
        return (
            //TODO:glr Add support for light / dark mode
            <div style={{ pointerEvents: 'all', background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }} className="topbar-container">
                <div className="topbar-inner-container">
                    <div className="topbar-left">
                        {activeDashboard ? (
                            <>
                                <div
                                    className="topbar-button-icon"
                                    onClick={e => {
                                        ContextMenu.Instance.addItem({ description: 'Logout', event: () => window.location.assign(Utils.prepend('/logout')), icon: 'edit' });
                                        ContextMenu.Instance.displayMenu(e.clientX + 5, e.clientY + 10);
                                    }}>
                                    {Doc.CurrentUserEmail}
                                </div>
                                <div className="topbar-button-icon" onClick={this.navigateToHome}>
                                    <FontAwesomeIcon icon="home" />
                                </div>
                            </>
                        ) : null}
                    </div>
                    <div className="topbar-center">
                        <div className="topbar-title" onClick={() => activeDashboard && SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}>
                            {activeDashboard ? StrCast(activeDashboard.title) : 'Dash'}
                        </div>
                        <div
                            className="topbar-button-icon"
                            onClick={e => {
                                const dashView = activeDashboard && DocumentManager.Instance.getDocumentView(activeDashboard);
                                ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' });
                                ContextMenu.Instance.addItem({
                                    description: 'Snapshot Dashboard',
                                    event: async () => {
                                        const batch = UndoManager.StartBatch('snapshot');
                                        await DashboardView.snapshotDashboard();
                                        batch.end();
                                    },
                                    icon: 'edit',
                                });
                                dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
                            }}>
                            <FontAwesomeIcon color="white" size="lg" icon="bars" />
                        </div>
                        <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom">
                            <div className="topbar-button-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))}>
                                <FontAwesomeIcon color={MainView.Instance._exploreMode ? 'red' : 'white'} icon="eye" size="lg" />
                            </div>
                        </Tooltip>
                    </div>
                    <div className="topbar-right">
                        {Doc.ActiveDashboard ? (
                            <div
                                className="topbar-button-icon"
                                onClick={() => {
                                    SharingManager.Instance.open(undefined, activeDashboard);
                                }}>
                                {GetEffectiveAcl(Doc.GetProto(Doc.ActiveDashboard)) === AclAdmin ? 'Share' : 'view original'}
                            </div>
                        ) : null}
                        <div className="topbar-button-icon" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')}>
                            <FontAwesomeIcon icon="question-circle" />
                        </div>
                        <div className="topbar-button-icon" onClick={() => SettingsManager.Instance.open()}>
                            <FontAwesomeIcon icon="cog" />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}