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, DocListCast } from '../../../fields/Doc';
import { Id } from '../../../fields/FieldSymbols';
import { Cast, StrCast } from '../../../fields/Types';
import { GetEffectiveAcl } from "../../../fields/util";
import { Utils } from '../../../Utils';
import { CurrentUserUtils } from "../../util/CurrentUserUtils";
import { DocumentManager } from "../../util/DocumentManager";
import { SelectionManager } from "../../util/SelectionManager";
import { SettingsManager } from "../../util/SettingsManager";
import { SharingManager } from "../../util/SharingManager";
import { undoBatch, UndoManager } from "../../util/UndoManager";
import { ContextMenu } from "../ContextMenu";
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 = () => {
            CurrentUserUtils.CaptureDashboardThumbnail()?.then(() => {
                Doc.UserDoc().activePage = "home";
                CurrentUserUtils.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 = Cast(Doc.UserDoc().activeDashboard, Doc, null)
            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-text">{Doc.CurrentUserEmail} (Placeholder)</div> : (null)}
                              </div>
                              <div className="topbar-center" >
                                    <div className="topbar-title" onClick={() => SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}>
                                          {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
                                    </div>
                                    <div className="topbar-button-icon" onClick={e => {
                                        const dashView = DocumentManager.Instance.getDocumentView(activeDashboard);
                                        ContextMenu.Instance.addItem({ description: "Open Dashboard View", event: this.navigateToHome, icon: "edit" });
                                        dashView?.showContextMenu(e.clientX+20, e.clientY+30);
                                    }}>
                                    <FontAwesomeIcon color="white" icon="bars" />
                                    </div>
                              </div>
                              <div className="topbar-right" >
                                    <div className="topbar-button-text" onClick={() => {SharingManager.Instance.open(undefined, activeDashboard)}}>
                                        {/* TODO: if this is my dashboard, display share
                                        if this is a shared dashboard, display "view original or view annotated" */}
                                        { Doc.GetProto(CurrentUserUtils.ActiveDashboard)?.author ===  Doc.CurrentUserEmail ?  "Share": "view original" }
                                    </div>
                                    <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>
                        
            );
      }
}