path: root/src/mobile/MobileInterface.tsx

import { library } from '@fortawesome/fontawesome-svg-core';
import {
    faAddressCard,
    faAlignLeft,
    faAlignRight,
    faAngleDoubleLeft,
    faAngleRight,
    faArrowDown,
    faArrowLeft,
    faArrowRight,
    faArrowUp,
    faArrowsAltH,
    faAsterisk,
    faBars,
    faBell,
    faBolt,
    faBook,
    faBrain,
    faBullseye,
    faCalculator,
    faCamera,
    faCaretDown,
    faCaretLeft,
    faCaretRight,
    faCaretSquareDown,
    faCaretSquareRight,
    faCaretUp,
    faCat,
    faCheck,
    faChevronLeft,
    faChevronRight,
    faClipboard,
    faClone,
    faCloudUploadAlt,
    faCommentAlt,
    faCompressArrowsAlt,
    faCut,
    faEdit,
    faEllipsisV,
    faEraser,
    faExclamation,
    faExpand,
    faExternalLinkAlt,
    faExternalLinkSquareAlt,
    faEye,
    faFileAlt,
    faFileAudio,
    faFileDownload,
    faFilePdf,
    faFilm,
    faFilter,
    faFolderOpen,
    faFont,
    faGlobeAsia,
    faHandPointLeft,
    faHighlighter,
    faHome,
    faImage,
    faLocationArrow,
    faLongArrowAltLeft,
    faLongArrowAltRight,
    faMicrophone,
    faMinus,
    faMobile,
    faMousePointer,
    faMusic,
    faObjectGroup,
    faPaintBrush,
    faPalette,
    faPause,
    faPen,
    faPenNib,
    faPhone,
    faPlay,
    faPlus,
    faPortrait,
    faQuestionCircle,
    faQuoteLeft,
    faRedoAlt,
    faReply,
    faSearch,
    faStamp,
    faStickyNote,
    faStop,
    faTasks,
    faTerminal,
    faTh,
    faThLarge,
    faThumbtack,
    faTimes,
    faToggleOn,
    faTrash,
    faTrashAlt,
    faTree,
    faTv,
    faUndoAlt,
    faVideo,
    faWindowClose,
    faWindowMaximize,
    faFile as fileSolid,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../ClientUtils';
import { CollectionViewType, DocumentType } from '../client/documents/DocumentTypes';
import { Docs, DocumentOptions } from '../client/documents/Documents';
import { CurrentUserUtils } from '../client/util/CurrentUserUtils';
import { ScriptingGlobals } from '../client/util/ScriptingGlobals';
import { SettingsManager } from '../client/util/SettingsManager';
import { Transform } from '../client/util/Transform';
import { UndoManager } from '../client/util/UndoManager';
import { DashboardView } from '../client/views/DashboardView';
import { GestureOverlay } from '../client/views/GestureOverlay';
import { AudioBox } from '../client/views/nodes/AudioBox';
import { DocumentView } from '../client/views/nodes/DocumentView';
import { RadialMenu } from '../client/views/nodes/RadialMenu';
import { RichTextMenu } from '../client/views/nodes/formattedText/RichTextMenu';
import { Doc, DocListCast } from '../fields/Doc';
import { InkTool } from '../fields/InkField';
import { List } from '../fields/List';
import { ScriptField } from '../fields/ScriptField';
import { Cast, FieldValue, StrCast } from '../fields/Types';
import './AudioUpload.scss';
import { Uploader } from './ImageUpload';
import './ImageUpload.scss';
import './MobileInterface.scss';
import { emptyFunction } from '../Utils';

library.add(
    ...[
        faTasks,
        faReply,
        faQuoteLeft,
        faHandPointLeft,
        faFolderOpen,
        faAngleDoubleLeft,
        faExternalLinkSquareAlt,
        faMobile,
        faThLarge,
        faWindowClose,
        faEdit,
        faTrashAlt,
        faPalette,
        faAngleRight,
        faBell,
        faTrash,
        faCamera,
        faExpand,
        faCaretDown,
        faCaretLeft,
        faCaretRight,
        faCaretSquareDown,
        faCaretSquareRight,
        faArrowsAltH,
        faPlus,
        faMinus,
        faTerminal,
        faToggleOn,
        fileSolid,
        faExternalLinkAlt,
        faLocationArrow,
        faSearch,
        faFileDownload,
        faStop,
        faCalculator,
        faWindowMaximize,
        faAddressCard,
        faQuestionCircle,
        faArrowLeft,
        faArrowRight,
        faArrowDown,
        faArrowUp,
        faBolt,
        faBullseye,
        faCaretUp,
        faCat,
        faCheck,
        faChevronRight,
        faClipboard,
        faClone,
        faCloudUploadAlt,
        faCommentAlt,
        faCompressArrowsAlt,
        faCut,
        faEllipsisV,
        faEraser,
        faExclamation,
        faFileAlt,
        faFileAudio,
        faFilePdf,
        faFilm,
        faFilter,
        faFont,
        faGlobeAsia,
        faHighlighter,
        faLongArrowAltRight,
        faMicrophone,
        faMousePointer,
        faMusic,
        faObjectGroup,
        faPause,
        faPen,
        faPenNib,
        faPhone,
        faPlay,
        faPortrait,
        faRedoAlt,
        faStamp,
        faStickyNote,
        faThumbtack,
        faTree,
        faTv,
        faUndoAlt,
        faBook,
        faVideo,
        faAsterisk,
        faBrain,
        faImage,
        faPaintBrush,
        faTimes,
        faEye,
        faHome,
        faLongArrowAltLeft,
        faBars,
        faTh,
        faChevronLeft,
        faAlignLeft,
        faAlignRight,
    ].map(m => m as any)
);

@observer
export class MobileInterface extends React.Component {
    static Instance: MobileInterface;
    private _library: Doc;
    private _mainDoc: any = CurrentUserUtils.setupActiveMobileMenu(Doc.UserDoc());
    @observable private _sidebarActive: boolean = false; //to toggle sidebar display
    @observable private _imageUploadActive: boolean = false; //to toggle image upload
    @observable private _audioUploadActive: boolean = false;
    @observable private _menuListView: boolean = false; //to switch between menu view (list / icon)
    @observable private _ink: boolean = false; //toggle whether ink is being dispalyed
    @observable private _homeMenu: boolean = true; // to determine whether currently at home menu
    @observable private dashboards: Doc | null = null; // currently selected document
    @observable private _activeDoc: Doc = this._mainDoc; // doc updated as the active mobile page is updated (initially home menu)
    @observable private _homeDoc: Doc = this._mainDoc; // home menu as a document
    @observable private _parents: Array<Doc> = []; // array of parent docs (for pathbar)

    @computed private get mainContainer() {
        return Doc.UserDoc() ? FieldValue(Cast(Doc.UserDoc().activeMobile, Doc)) : Doc.GuestMobile;
    }

    constructor(props: Readonly<{}>) {
        super(props);
        this._library = CurrentUserUtils.setupDashboards(Doc.UserDoc(), 'myDashboards'); // to access documents in Dash Web
        MobileInterface.Instance = this;
    }

    @action
    componentDidMount() {
        // if the home menu is in list view -> adjust the menu toggle appropriately
        this._menuListView = this._homeDoc._type_collection === 'stacking' ? true : false;
        Doc.ActiveTool = InkTool.None; // ink should intially be set to none
        Doc.UserDoc().activeMobile = this._homeDoc; // active mobile set to home
        AudioBox.Enabled = true;

        // remove double click to avoid mobile zoom in
        document.removeEventListener('dblclick', this.onReactDoubleClick);
        document.addEventListener('dblclick', this.onReactDoubleClick);
    }

    @action
    componentWillUnmount = () => {
        document.removeEventListener('dblclick', this.onReactDoubleClick);
    };

    // Prevent zooming in when double tapping the screen
    onReactDoubleClick = (e: MouseEvent) => {
        e.stopPropagation();
    };

    // Switch the mobile view to the given doc
    @action
    switchCurrentView = (doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => {
        if (!Doc.UserDoc()) return;
        if (this._activeDoc === this._homeDoc) {
            this._parents.push(this._activeDoc);
            this._homeMenu = false;
        }
        this._activeDoc = doc;
        Doc.UserDoc().activeMobile = doc;
        onSwitch?.();

        // Ensures that switching to home is not registed
        UndoManager.undoStack.length = 0;
        UndoManager.redoStack.length = 0;
    };

    // For toggling the hamburger menu
    @action
    toggleSidebar = () => {
        this._sidebarActive = !this._sidebarActive;

        if (this._ink) {
            this.onSwitchInking();
        }
    };
    /**
     * Method called when 'Library' button is pressed on the home screen
     */
    switchToLibrary = async () => {
        this.switchCurrentView(this._library);
        runInAction(() => (this._homeMenu = false));
        this.toggleSidebar();
    };

    /**
     * Back method for navigating through items
     */
    @action
    back = () => {
        const header = document.getElementById('header') as HTMLElement;
        const doc = Cast(this._parents.pop(), Doc) as Doc; // Parent document
        // Case 1: Parent document is 'dashboards'
        if (doc === (Cast(this._library, Doc) as Doc)) {
            this.dashboards = null;
            this.switchCurrentView(this._library);
            // Case 2: Parent document is the 'home' menu (root node)
        } else if (doc === (Cast(this._homeDoc, Doc) as Doc)) {
            this._homeMenu = true;
            this._parents = [];
            this.dashboards = null;
            this.switchCurrentView(this._homeDoc);
            // Case 3: Parent document is any document
        } else if (doc) {
            this.dashboards = doc;
            this.switchCurrentView(doc);
            this._homeMenu = false;
            header.textContent = String(doc.title);
        }
        this._ink = false; // turns ink off
    };

    /**
     * Return 'Home", which implies returning to 'Home' menu buttons
     */
    @action
    returnHome = () => {
        if (!this._homeMenu || this._sidebarActive) {
            this._homeMenu = true;
            this._parents = [];
            this.dashboards = null;
            this.switchCurrentView(this._homeDoc);
        }
        if (this._sidebarActive) {
            this.toggleSidebar();
        }
    };

    /**
     * Return to primary Dashboard in library (Dashboards Doc)
     */
    @action
    returnMain = () => {
        this._parents = [this._homeDoc];
        this.switchCurrentView(this._library);
        this._homeMenu = false;
        this.dashboards = null;
    };

    /**
     * Note: window.innerWidth and window.screen.width compute different values.
     * window.screen.width is the display size, however window.innerWidth is the
     * display resolution which computes differently.
     */
    returnWidth = () => window.innerWidth; //The windows width
    returnHeight = () => window.innerHeight - 300; //Calculating the windows height (-300 to account for topbar)
    whitebackground = () => 'white';
    /**
     * DocumentView for graphic display of all documents
     */
    @computed get displayDashboards() {
        return !this.mainContainer ? null : (
            <div style={{ position: 'relative', top: '198px', height: `calc(100% - 350px)`, width: '100%', left: '0%' }}>
                <DocumentView
                    Document={this.mainContainer}
                    addDocument={returnFalse}
                    addDocTab={returnFalse}
                    pinToPres={emptyFunction}
                    removeDocument={undefined}
                    ScreenToLocalTransform={Transform.Identity}
                    PanelWidth={this.returnWidth}
                    PanelHeight={this.returnHeight}
                    renderDepth={0}
                    isDocumentActive={returnTrue}
                    isContentActive={emptyFunction}
                    focus={emptyFunction}
                    styleProvider={this.whitebackground}
                    containerViewPath={returnEmptyDoclist}
                    whenChildContentsActiveChanged={emptyFunction}
                    childFilters={returnEmptyFilter}
                    childFiltersByRanges={returnEmptyFilter}
                    searchFilterDocs={returnEmptyDoclist}
                />
            </div>
        );
    }

    /**
     * Handles the click functionality in the library panel.
     * Navigates to the given doc and updates the sidebar.
     * @param doc: doc for which the method is called
     */
    handleClick = async (doc: Doc) => {
        runInAction(() => {
            if (doc.type !== 'collection' && this._sidebarActive) {
                this._parents.push(this._activeDoc);
                this.switchCurrentView(doc);
                this._homeMenu = false;
                this.toggleSidebar();
            } else {
                this._parents.push(this._activeDoc);
                this.switchCurrentView(doc);
                this._homeMenu = false;
                this.dashboards = doc;
            }
        });
    };

    /**
     * Called when an item in the library is clicked and should
     * be opened (open icon on RHS of all menu items)
     * @param doc doc to be opened
     */
    @action
    openFromSidebar = (doc: Doc) => {
        this._parents.push(this._activeDoc);
        this.switchCurrentView(doc);
        this._homeMenu = false;
        this.dashboards = doc;
        this.toggleSidebar();
    };

    // Renders the graphical pathbar
    renderPathbar = () => {
        const docPath = [...this._parents, this._activeDoc];
        const items = docPath.map((doc: Doc, index: any) => (
            <div className="pathbarItem" key={index}>
                {index === 0 ? null : <FontAwesomeIcon key="icon" className="pathIcon" icon="angle-right" size="lg" />}
                <div className="pathbarText" style={{ backgroundColor: this._homeMenu || doc === this._activeDoc ? 'rgb(119,17,37)' : undefined }} onClick={() => this.handlePathClick(doc, index)}>
                    {StrCast(doc.title)}
                </div>
            </div>
        ));
        return (
            <div className="pathbar">
                <div className="scrollmenu">{items}</div>
                {!this._parents.length ? null : (
                    <div className="back">
                        <FontAwesomeIcon onClick={this.back} icon={'chevron-left'} color="white" size={'2x'} />
                    </div>
                )}
                <div className="hidePath" />
            </div>
        );
    };

    // Handles when user clicks on a document in the pathbar
    @action
    handlePathClick = async (doc: Doc, index: number) => {
        const library = await this._library;
        if (doc === library) {
            this.dashboards = null;
            this.switchCurrentView(doc);
            this._parents.length = index;
        } else if (doc === this._homeDoc) {
            this.returnHome();
        } else {
            this.dashboards = doc;
            this.switchCurrentView(doc);
            this._parents.length = index;
        }
    };

    // Renders the contents of the menu and sidebar
    @computed get renderDefaultContent() {
        if (this._homeMenu) {
            return (
                <div>
                    <div className="navbar">
                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
                        <div className="header" id="header">
                            {StrCast(this._homeDoc.title)}
                        </div>
                        <div className="cover" id="cover" onClick={e => e.stopPropagation()}></div>
                        <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    {this.renderPathbar()}
                </div>
            );
        }
        // stores dashboards documents as 'dashboards' variable
        let dashboards = Doc.MyDashboards;
        if (this.dashboards) {
            dashboards = this.dashboards;
        }
        // returns a list of navbar buttons as 'buttons'
        const buttons = DocListCast(dashboards.data).map((doc: Doc, index: any) => {
            if (doc.type !== 'ink') {
                return (
                    <div className="item" key={index}>
                        <div className="item-title" onClick={() => this.handleClick(doc)}>
                            {' '}
                            {doc.title as string}{' '}
                        </div>
                        <div className="item-type" onClick={() => this.handleClick(doc)}>
                            {doc.type as string}
                        </div>
                        <FontAwesomeIcon onClick={() => this.handleClick(doc)} className="right" icon="angle-right" size="lg" style={{ display: `${doc.type === 'collection' ? 'block' : 'none'}` }} />
                        <FontAwesomeIcon className="open" onClick={() => this.openFromSidebar(doc)} icon="external-link-alt" size="lg" />
                    </div>
                );
            }
        });

        return (
            <div>
                <div className="navbar">
                    <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
                    <div className="header" id="header">
                        {this._sidebarActive ? 'library' : (this._activeDoc.title as string)}
                    </div>
                    <div className={`toggle-btn ${this._sidebarActive ? 'active' : ''}`} onClick={this.toggleSidebar}>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div className={`background ${this._sidebarActive ? 'active' : ''}`} onClick={this.toggleSidebar}></div>
                </div>
                {this.renderPathbar()}
                <div className={`sidebar ${this._sidebarActive ? 'active' : ''}`}>
                    <div className="sidebarButtons">
                        {this.dashboards ? (
                            <>
                                {buttons}
                                <div className="item" key="home" onClick={this.returnMain} style={{ opacity: 0.7 }}>
                                    <FontAwesomeIcon className="right" icon="angle-double-left" size="lg" />
                                    <div className="item-type">Return to dashboards</div>
                                </div>
                            </>
                        ) : (
                            <>
                                {buttons}
                                <div className="item" style={{ opacity: 0.7 }} onClick={() => this.createNewDashboard()}>
                                    <FontAwesomeIcon className="right" icon="plus" size="lg" />
                                    <div className="item-type">Create New Dashboard</div>
                                </div>
                            </>
                        )}
                    </div>
                </div>
                <div className={`blanket ${this._sidebarActive ? 'active' : ''}`} onClick={this.toggleSidebar}></div>
            </div>
        );
    }

    /**
     * Handles the 'Create New Dashboard' button in the menu (taken from MainView.tsx)
     */
    @action
    createNewDashboard = (id?: string) => {
        const scens = Doc.MyDashboards;
        const dashboardCount = DocListCast(scens.data).length + 1;
        const freeformOptions: DocumentOptions = {
            x: 0,
            y: 400,
            title: 'Collection ' + dashboardCount,
        };

        const freeformDoc = Doc.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions);
        const dashboardDoc = DashboardView.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, 'row');

        const toggleComic = ScriptField.MakeScript(`toggleComicMode()`);
        const cloneDashboard = ScriptField.MakeScript(`cloneDashboard()`);
        dashboardDoc.contextMenuScripts = new List<ScriptField>([toggleComic!, cloneDashboard!]);
        dashboardDoc.contextMenuLabels = new List<string>(['Toggle Comic Mode', 'New Dashboard Layout']);

        Doc.AddDocToList(scens, 'data', dashboardDoc);
    };

    // Button for switching between pen and ink mode
    @action
    onSwitchInking = () => {
        const button = document.getElementById('inkButton') as HTMLElement;
        button.style.backgroundColor = this._ink ? 'white' : 'black';
        button.style.color = this._ink ? 'black' : 'white';

        if (!this._ink) {
            Doc.ActiveTool = InkTool.Pen;
            this._ink = true;
        } else {
            Doc.ActiveTool = InkTool.None;
            this._ink = false;
        }
    };

    // The static ink menu that appears at the top
    @computed get inkMenu() {
        return this._activeDoc._type_collection !== CollectionViewType.Docking || !this._ink ? null : <div className="colorSelector">{/* <CollectionFreeFormViewChrome /> */}</div>;
    }

    // DocButton that uses UndoManager and handles the opacity change if CanUndo is true
    @computed get undo() {
        if (this.mainContainer && this._activeDoc.type === 'collection' && this._activeDoc !== this._homeDoc && this._activeDoc !== Doc.SharingDoc() && this._activeDoc.title !== 'WORKSPACES') {
            return (
                <div
                    className="docButton"
                    style={{ backgroundColor: 'black', color: 'white', fontSize: '60', opacity: UndoManager.CanUndo() ? '1' : '0.4' }}
                    id="undoButton"
                    title="undo"
                    onClick={(e: React.MouseEvent) => {
                        UndoManager.Undo();
                        e.stopPropagation();
                    }}>
                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="undo-alt" />
                </div>
            );
        } else return null;
    }

    // DocButton that uses UndoManager and handles the opacity change if CanRedo is true
    @computed get redo() {
        if (this.mainContainer && this._activeDoc.type === 'collection' && this._activeDoc !== this._homeDoc && this._activeDoc !== Doc.SharingDoc() && this._activeDoc.title !== 'WORKSPACES') {
            return (
                <div
                    className="docButton"
                    style={{ backgroundColor: 'black', color: 'white', fontSize: '60', opacity: UndoManager.CanRedo() ? '1' : '0.4' }}
                    id="undoButton"
                    title="redo"
                    onClick={(e: React.MouseEvent) => {
                        UndoManager.Redo();
                        e.stopPropagation();
                    }}>
                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="redo-alt" />
                </div>
            );
        } else return null;
    }

    // DocButton for switching into ink mode
    @computed get drawInk() {
        return !this.mainContainer || this._activeDoc._type_collection !== CollectionViewType.Docking ? null : (
            <div className="docButton" id="inkButton" onClick={this.onSwitchInking}>
                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib" />
            </div>
        );
    }

    // DocButton: Button that appears on the bottom of the screen to initiate image upload
    @computed get uploadImageButton() {
        if (this._activeDoc.type === DocumentType.COL && this._activeDoc !== this._homeDoc && this._activeDoc._type_collection !== CollectionViewType.Docking && this._activeDoc.title !== 'WORKSPACES') {
            return (
                <div className="docButton" id="imageButton" onClick={this.toggleUpload}>
                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload" />
                </div>
            );
        } else return null;
    }

    // DocButton to download images on the mobile
    @computed get downloadDocument() {
        if (this._activeDoc.type === 'image' || this._activeDoc.type === 'pdf' || this._activeDoc.type === 'video') {
            return (
                <div className="docButton" title={'Download Image'} style={{ backgroundColor: 'white', color: 'black' }} onClick={e => window.open(this._activeDoc['data-path']?.toString())}>
                    {' '}
                    {/*  daa-path holds the url */}
                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="download" />
                </div>
            );
        } else return null;
    }

    // DocButton for pinning images to presentation
    @computed get pinToPresentation() {
        // Only making button available if it is an image
        if (!(this._activeDoc.type === 'collection' || this._activeDoc.type === 'presentation')) {
            return (
                <div className="docButton" title={'Pin to presentation'} style={{ backgroundColor: 'white', color: 'black' }} onClick={e => DocumentView.PinDoc(this._activeDoc, {})}>
                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
                </div>
            );
        } else return null;
    }

    // Buttons for switching the menu between large and small icons
    @computed get switchMenuView() {
        return this._activeDoc.title !== this._homeDoc.title ? null : (
            <div className="homeSwitch">
                <div className={`list ${!this._menuListView ? 'active' : ''}`} onClick={this.changeToIconView}>
                    <FontAwesomeIcon size="sm" icon="th-large" />
                </div>
                <div className={`list ${this._menuListView ? 'active' : ''}`} onClick={this.changeToListView}>
                    <FontAwesomeIcon size="sm" icon="bars" />
                </div>
            </div>
        );
    }

    // Logic for switching the menu into the icons
    @action
    changeToIconView = () => {
        if ((this._homeDoc._type_collection = 'stacking')) {
            this._menuListView = false;
            this._homeDoc._type_collection = 'masonry';
            this._homeDoc.columnWidth = 300;
            this._homeDoc._columnWidth = 300;
            const menuButtons = DocListCast(this._homeDoc.data);
            menuButtons.map(doc => {
                const buttonData = DocListCast(doc.data);
                buttonData[1]._nativeWidth = 0.1;
                buttonData[1]._width = 0.1;
                buttonData[1]._dimMagnitude = 0;
                buttonData[1]._opacity = 0;
                doc._nativeWidth = 400;
            });
        }
    };

    // Logic for switching the menu into the stacking view
    @action
    changeToListView = () => {
        if ((this._homeDoc._type_collection = 'masonry')) {
            this._homeDoc._type_collection = 'stacking';
            this._menuListView = true;
            const menuButtons = DocListCast(this._homeDoc.data);
            menuButtons.map(doc => {
                const buttonData = DocListCast(doc.data);
                buttonData[1]._nativeWidth = 450;
                buttonData[1]._dimMagnitude = 2;
                buttonData[1]._opacity = 1;
                doc._nativeWidth = 900;
            });
        }
    };

    // For setting up the presentation document for the home menu
    @action
    setupDefaultPresentation = () => {
        const presentation = Doc.ActivePresentation;

        if (presentation) {
            this.switchCurrentView(presentation);
            this._homeMenu = false;
        }
    };

    // For toggling image upload pop up
    @action
    toggleUpload = () => (this._imageUploadActive = !this._imageUploadActive);

    // For toggling audio record and dictate pop up
    @action
    toggleAudio = () => (this._audioUploadActive = !this._audioUploadActive);

    // Button for toggling the upload pop up in a collection
    @action
    toggleUploadInCollection = () => {
        const button = document.getElementById('imageButton') as HTMLElement;
        button.style.backgroundColor = this._imageUploadActive ? 'white' : 'black';
        button.style.color = this._imageUploadActive ? 'black' : 'white';

        this._imageUploadActive = !this._imageUploadActive;
    };

    // For closing the image upload pop up
    @action
    closeUpload = () => {
        this._imageUploadActive = false;
    };

    // Returns the image upload pop up
    @computed get uploadImage() {
        const doc = !this._homeMenu ? this._activeDoc : (Cast(Doc.SharingDoc(), Doc) as Doc);
        return <Uploader Document={doc} />;
    }

    // Radial menu can only be used if it is a colleciton and it is not a homeDoc
    // (and cannot be used on Dashboard to avoid pin to presentation opening on right)
    @computed get displayRadialMenu() {
        return this._activeDoc.type === 'collection' && this._activeDoc !== this._homeDoc && this._activeDoc._type_collection !== CollectionViewType.Docking ? <RadialMenu /> : null;
    }

    onDragOver = (e: React.DragEvent) => {
        e.preventDefault();
        e.stopPropagation();
    };

    /**
     * MENU BUTTON
     * Switch view from mobile menu to access the mobile uploads
     * Global function name: openMobileUploads()
     */
    @action
    switchToMobileUploads = () => {
        const mobileUpload = Cast(Doc.SharingDoc(), Doc) as Doc;
        this.switchCurrentView(mobileUpload);
        this._homeMenu = false;
    };

    render() {
        return (
            <div className="mobileInterface-container" onDragOver={this.onDragOver}>
                <SettingsManager />
                <div className={`image-upload ${this._imageUploadActive ? 'active' : ''}`}>{this.uploadImage}</div>
                {this.switchMenuView}
                {this.inkMenu}
                <GestureOverlay isActive={true}>
                    <div style={{ display: 'none' }}>
                        <RichTextMenu key="rich" />
                    </div>
                    <div className="docButtonContainer">
                        {this.pinToPresentation}
                        {this.downloadDocument}
                        {this.undo}
                        {this.redo}
                        {this.drawInk}
                        {this.uploadImageButton}
                    </div>
                    {this.displayDashboards}
                    {this.renderDefaultContent}
                </GestureOverlay>
                {this.displayRadialMenu}
            </div>
        );
    }
}

//Global functions for mobile menu
ScriptingGlobals.add(function switchToMobileLibrary() {
    return MobileInterface.Instance.switchToLibrary();
}, 'opens the library to navigate through dashboards on Dash Mobile');
ScriptingGlobals.add(function openMobileUploads() {
    return MobileInterface.Instance.toggleUpload();
}, 'opens the upload files menu for Dash Mobile');
ScriptingGlobals.add(function switchToMobileUploadCollection() {
    return MobileInterface.Instance.switchToMobileUploads();
}, 'opens the mobile uploads collection on Dash Mobile');
ScriptingGlobals.add(function openMobileAudio() {
    return MobileInterface.Instance.toggleAudio();
}, 'opens the record and dictate menu on Dash Mobile');
ScriptingGlobals.add(function switchToMobilePresentation() {
    return MobileInterface.Instance.setupDefaultPresentation();
}, 'opens the presentation on Dash Mobile');
ScriptingGlobals.add(function openMobileSettings() {
    return SettingsManager.Instance.openMgr();
}, 'opens settings on Dash Mobile');

// Other global functions for mobile
ScriptingGlobals.add(
    function switchMobileView(doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) {
        return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch);
    },
    'changes the active document displayed on the Dash Mobile',
    '(doc: any)'
);