import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Button, FontSize, IconButton, Size } from 'browndash-components';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { FaBug, FaCamera } from 'react-icons/fa';
import { AclAdmin, Doc, DocListCast } from '../../../fields/Doc';
import { StrCast } from '../../../fields/Types';
import { GetEffectiveAcl } from '../../../fields/util';
import { DocumentManager } from '../../util/DocumentManager';
import { ReportManager } from '../../util/ReportManager';
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() ?? new Promise<void>(res => res())).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
        });
    };

    @observable textColor: string = Colors.LIGHT_GRAY;
    @observable backgroundColor: string = Colors.DARK_GRAY;

    /**
     * Returns the left hand side of the topbar.
     * This side of the topbar contains the different modes.
     * The modes include:
     * - Explore mode
     * - Tracking mode
     */
    @computed get topbarLeft() {
    return (
            <div className="topbar-left">
                {Doc.ActiveDashboard ? <IconButton onClick={this.navigateToHome} icon={<FontAwesomeIcon icon="home" />} isCircle={true} hoverStyle="gray" color={this.textColor} /> : 
                <div className="logo-container">
                    <img className='logo' src="/assets/medium-blue-light-blue-circle.png" alt="dash logo"></img>
                    <span style={{color: Colors.LIGHT_GRAY, fontWeight: 200}}>brown</span><span style={{color: Colors.LIGHT_BLUE, fontWeight: 500}}>dash</span>
                </div>
                }
                {Doc.ActiveDashboard && <Button
                    text="Explore"
                    tooltip="Browsing mode for directly navigating to documents"
                    fontSize={FontSize.SECONDARY}
                    isActive={MainView.Instance._exploreMode}
                    size={Size.SMALL}
                    color={this.textColor}
                    borderRadius={5}
                    hoverStyle="gray"
                    iconPosition="right"
                    onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))}
                />}
            </div>
        );
    }

        /**
     * Returns the center of the topbar
     * This part of the topbar contains everything related to the current dashboard including:
     * - Selection of dashboards
     * - Creating a new dashboard
     * - Taking a snapshot of a dashboard
     */
         @computed get topbarCenter() {
            const myDashboards = DocListCast(Doc.MyDashboards.data);
            const activeDashboard = Doc.ActiveDashboard;
            // const dashboardItems = myDashboards.map(board => {
            //     const boardTitle = StrCast(board.title);
            //     console.log(boardTitle);
            //     return {
            //         text: boardTitle,
            //         onClick: () => DashboardView.openDashboard(board),
            //         val: board,
            //     };
            // });
            return activeDashboard ? (
                <div className="topbar-center">
                    <Button
                        text={StrCast(activeDashboard.title)}
                        tooltip="Browsing mode for directly navigating to documents"
                        fontSize={FontSize.SECONDARY}
                        size={Size.SMALL}
                        color={"white"}
                        type="outline"
                        backgroundColor={Colors.MEDIUM_BLUE}
                        borderRadius={5}
                        hoverStyle="none"
                        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);
                            }}
                    />
                        <Button
                            text={GetEffectiveAcl(Doc.GetProto(activeDashboard)) === AclAdmin ? 'Share' : 'View Original'}
                            onClick={() => {
                                SharingManager.Instance.open(undefined, activeDashboard);
                            }}
                            type="outline"
                            fontSize={FontSize.SECONDARY}
                            size={Size.SMALL}
                            borderRadius={5}
                            hoverStyle="gray"
                    />
                    {!Doc.noviceMode && <IconButton
                        fontSize={FontSize.SECONDARY}
                        isCircle={true}
                        tooltip="Work on a copy of the dashboard layout"
                        size={Size.SMALL}
                        color={this.textColor}
                        borderRadius={Borders.STANDARD}
                        hoverStyle="gray"
                        onClick={async () => {
                            const batch = UndoManager.StartBatch('snapshot');
                            await DashboardView.snapshotDashboard();
                            batch.end();
                        }}
                        icon={<FaCamera />}
                    />}
                </div>
            ) : null;
        }
    
        /**
         * Returns the right hand side of the topbar.
         * This part of the topbar includes information about the current user,
         * and allows the user to access their account settings etc.
         */
        @computed get topbarRight() {
    
            return (
                <div className="topbar-right">
                <IconButton
                    size={Size.SMALL}
                    isCircle={true}
                    color={Colors.LIGHT_GRAY}
                    backgroundColor={Colors.DARK_GRAY}
                    hoverStyle="gray"
                    onClick={() => ReportManager.Instance.open()}
                    icon={<FaBug />}
                />
                <IconButton
                    size={Size.SMALL}
                    isCircle={true}
                    color={Colors.LIGHT_GRAY}
                    backgroundColor={Colors.DARK_GRAY}
                    hoverStyle="gray"
                    onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')}
                    icon={<FontAwesomeIcon icon="question-circle" />}
                />
                <IconButton
                    size={Size.SMALL}
                    isCircle={true}
                    color={Colors.LIGHT_GRAY}
                    backgroundColor={Colors.DARK_GRAY}
                    hoverStyle="gray"
                    isActive={SettingsManager.Instance.isOpen}
                    onClick={() => SettingsManager.Instance.open()}
                    icon={<FontAwesomeIcon icon="cog" />}
                />
                {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.textColor} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
                </div>
            );
        }

    // 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={() => ReportManager.Instance.open()}>
    //                         <MdBugReport />
    //                     </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>
    //     );
    // }
    render() {
        return (
            //TODO:glr Add support for light / dark mode
            <div style={{ pointerEvents: 'all' }} className="topbar-container">
                <div
                    className="topbar-inner-container"
                    style={{
                        color: this.textColor,
                        background: this.backgroundColor,
                    }}>
                    {this.topbarLeft}
                    {this.topbarCenter}
                    {this.topbarRight}
                </div>
            </div>
        );
    }
}
