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 { Doc, DocListCast } from '../../../fields/Doc';
import { Id } from '../../../fields/FieldSymbols';
import { Cast, StrCast } from '../../../fields/Types';
import { Utils } from '../../../Utils';
import { CurrentUserUtils } from "../../util/CurrentUserUtils";
import { SettingsManager } from "../../util/SettingsManager";
import { undoBatch, UndoManager } from "../../util/UndoManager";
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 = () => {
            Doc.UserDoc().activeDashboard = undefined
      }
      render() {
            const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
            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">
                                    <div className="topbar-button-text" onClick={this.navigateToHome}>Home</div>
                              </div>
                              <div className="topbar-center" >
                              </div>
                              <div className="topbar-right" >
                                    <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 className="topbar-inner-container">
                              <div className="topbar-left">
                                    {activeDashboard ? <div className="topbar-button-text">Freeform View (Placeholder)</div> : (null)}
                              </div>
                              <div className="topbar-center" >
                                    <div className="topbar-title">
                                          {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
                                    </div>
                              </div>
                              <div className="topbar-right" >
                                    {/* TODO: if this is my dashboard, display share
                                     if this is a shared dashboard, display "view original or view annotated" */}
                                    <div className="topbar-button-text" >Share</div>
                              </div>
                        </div>
                  </div>
                 

                              {/* <div className="topbar-left">
                        <div className="topbar-lozenge-user">
                            {`${Doc.CurrentUserEmail}`}
                        </div>
                        <div className="topbar-icon" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
                            {"Log out"}
                        </div>
                    </div> */}
            {/* <div className="topbar-center" >
                        <div className="topbar-lozenge-dashboard">
                              <div style={{ color: Colors.WHITE }}>
                                    {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
                              </div> */}

            {/* <select className="topbar-dashSelect" onChange={undoBatch(e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))}
                                value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}
                                style={{ color: Colors.WHITE }}>
                                {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
                            </select> */}
            {/* </div> */ }
            {/* <div className="topbar-dashboards">
                            <Tooltip title={<div className="dash-tooltip">Create a new dashboard </div>} placement="bottom"><div className="topbar-icon" onClick={async () => {
                                const batch = UndoManager.StartBatch("new dash");
                                await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
                                batch.end();
                            }}>
                                New<FontAwesomeIcon icon="plus" />
                            </div>
                            </Tooltip>
                            <Tooltip title={<div className="dash-tooltip">Work on a copy of the dashboard layout</div>} placement="bottom">
                                <div className="topbar-icon" onClick={async () => {
                                    const batch = UndoManager.StartBatch("snapshot");
                                    await CurrentUserUtils.snapshotDashboard(Doc.UserDoc());
                                    batch.end();
                                }}>
                                    Snapshot<FontAwesomeIcon icon="camera" />
                                </div>
                            </Tooltip>
                            <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom">
                                <div className="topbar-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => MainView.Instance._exploreMode = !MainView.Instance._exploreMode)}>
                                    Explore<FontAwesomeIcon icon="map" />
                                </div>
                            </Tooltip>
                        </div> */}
            {/* </div> */ }
            {/* <div className="topbar-right" > */ }
            {/* <div onClick={() => window.open(
                            "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
                              <FontAwesomeIcon icon="question-circle" />
                          </div>
                          <div onClick={() => SettingsManager.Instance.open()}>
                          <FontAwesomeIcon icon="cog" />
                          </div> */}
            {/* <div className="topbar-icon" >
                                          <FontAwesomeIcon icon="question-circle" />
                                    </div>
                                    <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
                                          <FontAwesomeIcon icon="cog" />
                                    </div>
                              </div> */}
                        
            );
      }
}