import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { action, computed, observable, runInAction, trace } from 'mobx';
import { observer } from 'mobx-react';
import { Doc } from '../../fields/Doc';
import { RichTextField } from '../../fields/RichTextField';
import { Cast, NumCast } from '../../fields/Types';
import { emptyFunction, returnFalse, setupMoveUpEvents, simulateMouseClick } from '../../Utils';
import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
import { Docs } from '../documents/Documents';
import { DragManager } from '../util/DragManager';
import { SelectionManager } from '../util/SelectionManager';
import { SharingManager } from '../util/SharingManager';
import { undoBatch, UndoManager } from '../util/UndoManager';
import { CollectionDockingView } from './collections/CollectionDockingView';
import { TabDocView } from './collections/TabDocView';
import './DocumentButtonBar.scss';
import { Colors } from './global/globalEnums';
import { LinkPopup } from './linking/LinkPopup';
import { MetadataEntryMenu } from './MetadataEntryMenu';
import { DocumentLinksButton } from './nodes/DocumentLinksButton';
import { DocumentView, DocumentViewInternal, OpenWhereMod } from './nodes/DocumentView';
import { DashFieldView } from './nodes/formattedText/DashFieldView';
import { GoogleRef } from './nodes/formattedText/FormattedTextBox';
import { TemplateMenu } from './TemplateMenu';
import React = require('react');
import { DocumentType } from '../documents/DocumentTypes';
const higflyout = require('@hig/flyout');
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;

const cloud: IconProp = 'cloud-upload-alt';
const fetch: IconProp = 'sync-alt';

enum UtilityButtonState {
    Default,
    OpenRight,
    OpenExternally,
}

@observer
export class DocumentButtonBar extends React.Component<{ views: () => (DocumentView | undefined)[]; stack?: any }, {}> {
    private _dragRef = React.createRef<HTMLDivElement>();
    private _pullAnimating = false;
    private _pushAnimating = false;
    private _pullColorAnimating = false;

    @observable private pushIcon: IconProp = 'arrow-alt-circle-up';
    @observable private pullIcon: IconProp = 'arrow-alt-circle-down';
    @observable private pullColor: string = 'white';
    @observable public isAnimatingFetch = false;
    @observable public isAnimatingPulse = false;

    @observable private openHover: UtilityButtonState = UtilityButtonState.Default;

    @observable public static Instance: DocumentButtonBar;
    public static hasPushedHack = false;
    public static hasPulledHack = false;

    constructor(props: { views: () => (DocumentView | undefined)[] }) {
        super(props);
        runInAction(() => (DocumentButtonBar.Instance = this));
    }

    public startPullOutcome = action((success: boolean) => {
        if (!this._pullAnimating) {
            this._pullAnimating = true;
            this.pullIcon = success ? 'check-circle' : 'stop-circle';
            setTimeout(
                () =>
                    runInAction(() => {
                        this.pullIcon = 'arrow-alt-circle-down';
                        this._pullAnimating = false;
                    }),
                1000
            );
        }
    });

    public startPushOutcome = action((success: boolean) => {
        this.isAnimatingPulse = false;
        if (!this._pushAnimating) {
            this._pushAnimating = true;
            this.pushIcon = success ? 'check-circle' : 'stop-circle';
            setTimeout(
                () =>
                    runInAction(() => {
                        this.pushIcon = 'arrow-alt-circle-up';
                        this._pushAnimating = false;
                    }),
                1000
            );
        }
    });

    public setPullState = action((unchanged: boolean) => {
        this.isAnimatingFetch = false;
        if (!this._pullColorAnimating) {
            this._pullColorAnimating = true;
            this.pullColor = unchanged ? 'lawngreen' : 'red';
            setTimeout(this.clearPullColor, 1000);
        }
    });

    private clearPullColor = action(() => {
        this.pullColor = 'white';
        this._pullColorAnimating = false;
    });

    get view0() {
        return this.props.views()?.[0];
    }

    @computed
    get considerGoogleDocsPush() {
        const targetDoc = this.view0?.props.Document;
        const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined;
        const animation = this.isAnimatingPulse ? 'shadow-pulse 1s linear infinite' : 'none';
        return !targetDoc ? null : (
            <Tooltip
                title={
                    <>
                        <div className="dash-tooltip">{`${published ? 'Push' : 'Publish'} to Google Docs`}</div>
                    </>
                }>
                <div
                    className="documentButtonBar-button"
                    style={{ animation }}
                    onClick={async () => {
                        await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
                        !published && runInAction(() => (this.isAnimatingPulse = true));
                        DocumentButtonBar.hasPushedHack = false;
                        targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
                    }}>
                    <FontAwesomeIcon className="documentdecorations-icon" icon={published ? (this.pushIcon as any) : cloud} size={published ? 'sm' : 'xs'} />
                </div>
            </Tooltip>
        );
    }

    @computed
    get considerGoogleDocsPull() {
        const targetDoc = this.view0?.props.Document;
        const dataDoc = targetDoc && Doc.GetProto(targetDoc);
        const animation = this.isAnimatingFetch ? 'spin 0.5s linear infinite' : 'none';

        const title = (() => {
            switch (this.openHover) {
                default:
                case UtilityButtonState.Default:
                    return `${!dataDoc?.googleDocUnchanged ? 'Pull from' : 'Fetch'} Google Docs`;
                case UtilityButtonState.OpenRight:
                    return 'Open in Right Split';
                case UtilityButtonState.OpenExternally:
                    return 'Open in new Browser Tab';
            }
        })();

        return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? null : (
            <Tooltip title={<div className="dash-tooltip">{title}</div>}>
                <div
                    className="documentButtonBar-button"
                    style={{ backgroundColor: this.pullColor }}
                    onPointerEnter={action(e => {
                        if (e.altKey) {
                            this.openHover = UtilityButtonState.OpenExternally;
                        } else if (e.shiftKey) {
                            this.openHover = UtilityButtonState.OpenRight;
                        }
                    })}
                    onPointerLeave={action(() => (this.openHover = UtilityButtonState.Default))}
                    onClick={async e => {
                        const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`;
                        if (e.shiftKey) {
                            e.preventDefault();
                            let googleDoc = await Cast(dataDoc.googleDoc, Doc);
                            if (!googleDoc) {
                                const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, useCors: false };
                                googleDoc = Docs.Create.WebDocument(googleDocUrl, options);
                                dataDoc.googleDoc = googleDoc;
                            }
                            CollectionDockingView.AddSplit(googleDoc, OpenWhereMod.right);
                        } else if (e.altKey) {
                            e.preventDefault();
                            window.open(googleDocUrl);
                        } else {
                            this.clearPullColor();
                            DocumentButtonBar.hasPulledHack = false;
                            targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1;
                            dataDoc.googleDocUnchanged && runInAction(() => (this.isAnimatingFetch = true));
                        }
                    }}>
                    <FontAwesomeIcon
                        className="documentdecorations-icon"
                        size="sm"
                        style={{ WebkitAnimation: animation, MozAnimation: animation }}
                        icon={(() => {
                            // prettier-ignore
                            switch (this.openHover) {
                                default:
                                case UtilityButtonState.Default: return dataDoc.googleDocUnchanged === false ? (this.pullIcon as any) : fetch;
                                case UtilityButtonState.OpenRight: return 'arrow-alt-circle-right';
                                case UtilityButtonState.OpenExternally: return 'share';
                            }
                        })()}
                    />
                </div>
            </Tooltip>
        );
    }
    @observable subFollow = '';
    @computed
    get followLinkButton() {
        const targetDoc = this.view0?.props.Document;
        const followBtn = (allDocs: boolean, click: (doc: Doc) => void, isSet: (doc?: Doc) => boolean, icon: IconProp) => {
            const tooltip = `Follow ${this.subPin}documents`;
            return !tooltip ? null : (
                <Tooltip title={<div className="dash-tooltip">{tooltip}</div>}>
                    <div className="documentButtonBar-followIcon" style={{ backgroundColor: isSet(targetDoc) ? Colors.LIGHT_BLUE : Colors.DARK_GRAY, color: isSet(targetDoc) ? Colors.BLACK : Colors.WHITE }}>
                        <FontAwesomeIcon
                            className="documentdecorations-icon"
                            style={{ width: 20 }}
                            key={icon.toString()}
                            size="sm"
                            icon={icon}
                            onPointerEnter={action(e => (this.subPin = allDocs ? 'All ' : ''))}
                            onPointerLeave={action(e => (this.subPin = ''))}
                            onClick={e => {
                                this.props.views().forEach(dv => click(dv!.rootDoc));
                                e.stopPropagation();
                            }}
                        />
                    </div>
                </Tooltip>
            );
        };
        return !targetDoc ? null : (
            <Tooltip title={<div className="dash-tooltip">Set onClick to follow primary link</div>}>
                <div
                    className="documentButtonBar-icon documentButtonBar-follow"
                    style={{ backgroundColor: targetDoc.isLinkButton ? Colors.LIGHT_BLUE : Colors.DARK_GRAY, color: targetDoc.isLinkButton ? Colors.BLACK : Colors.WHITE }}
                    onClick={undoBatch(e => this.props.views().map(view => view?.docView?.toggleFollowLink(undefined, undefined, false)))}>
                    <div className="documentButtonBar-followTypes">
                        {followBtn(
                            true,
                            (doc: Doc) => (doc.followAllLinks = !doc.followAllLinks),
                            (doc?: Doc) => (doc?.followAllLinks ? true : false),
                            'window-maximize'
                        )}
                    </div>
                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="hand-point-right" />
                </div>
            </Tooltip>
        );
    }

    @observable subLink = '';
    @computed get linkButton() {
        const targetDoc = this.view0?.props.Document;
        return !targetDoc || !this.view0 ? null : (
            <div className="documentButtonBar-icon documentButtonBar-link">
                <div className="documentButtonBar-linkTypes">
                    <Tooltip title={<div>search for target</div>}>
                        <div className="documentButtonBar-button">
                            <button style={{ backgroundColor: 'transparent', width: 35, height: 35, display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }} onPointerDown={this.toggleLinkSearch}>
                                <FontAwesomeIcon style={{ position: 'absolute', transform: 'scale(1.5)' }} icon={'search'} size="lg" />
                                <FontAwesomeIcon style={{ position: 'absolute', transform: 'scale(0.5)', transformOrigin: 'center', top: 9, left: 2 }} icon={'link'} size="lg" />
                            </button>
                        </div>
                    </Tooltip>
                </div>
                <div style={{ width: 25, height: 25 }}>
                    <DocumentLinksButton View={this.view0} AlwaysOn={true} InMenu={true} StartLink={true} />
                </div>
            </div>
        );
    }

    @observable subPin = '';
    @computed
    get pinButton() {
        const targetDoc = this.view0?.props.Document;
        const pinBtn = (pinDocLayout: boolean, pinDocContent: boolean, icon: IconProp) => {
            const tooltip = `Pin Document and Save ${this.subPin} to trail`;
            return !tooltip ? null : (
                <Tooltip title={<div className="dash-tooltip">{tooltip}</div>}>
                    <div className="documentButtonBar-pinIcon">
                        <FontAwesomeIcon
                            className="documentdecorations-icon"
                            style={{ width: 20 }}
                            key={icon.toString()}
                            size="sm"
                            icon={icon}
                            onPointerEnter={action(
                                e =>
                                    (this.subPin =
                                        (pinDocLayout ? 'Layout' : '') +
                                        (pinDocLayout && pinDocContent ? ' &' : '') +
                                        (pinDocContent ? ' Content View' : '') +
                                        (pinDocLayout && pinDocContent ? '(shift+alt)' : pinDocLayout ? '(shift)' : pinDocContent ? '(alt)' : ''))
                            )}
                            onPointerLeave={action(e => (this.subPin = ''))}
                            onClick={e => {
                                const docs = this.props
                                    .views()
                                    .filter(v => v)
                                    .map(dv => dv!.rootDoc);
                                TabDocView.PinDoc(docs, { pinAudioPlay: true, pinDocLayout, pinDocContent, activeFrame: Cast(docs.lastElement()?.activeFrame, 'number', null), currentFrame: Cast(docs.lastElement()?.currentFrame, 'number', null) });
                                e.stopPropagation();
                            }}
                        />
                    </div>
                </Tooltip>
            );
        };
        return !targetDoc ? null : (
            <Tooltip title={<div className="dash-tooltip">{`Pin Document ${SelectionManager.Views().length > 1 ? 'multiple documents' : ''} to Trail`}</div>}>
                <div
                    className="documentButtonBar-icon documentButtonBar-pin"
                    onClick={e => {
                        const docs = this.props
                            .views()
                            .filter(v => v)
                            .map(dv => dv!.rootDoc);
                        TabDocView.PinDoc(docs, { pinAudioPlay: true, pinDocLayout: e.shiftKey, pinDocContent: e.altKey, activeFrame: Cast(docs.lastElement()?.activeFrame, 'number', null) });
                        e.stopPropagation();
                    }}>
                    <div className="documentButtonBar-pinTypes">
                        {pinBtn(true, false, 'window-maximize')}
                        {pinBtn(false, true, 'address-card')}
                        {pinBtn(true, true, 'id-card')}
                    </div>
                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
                </div>
            </Tooltip>
        );
    }

    @computed
    get shareButton() {
        const targetDoc = this.view0?.props.Document;
        return !targetDoc ? null : (
            <Tooltip title={<div className="dash-tooltip">{'Open Sharing Manager'}</div>}>
                <div className="documentButtonBar-icon" style={{ color: 'white' }} onClick={e => SharingManager.Instance.open(this.view0, targetDoc)}>
                    <FontAwesomeIcon className="documentdecorations-icon" icon="users" />
                </div>
            </Tooltip>
        );
    }

    @computed
    get menuButton() {
        const targetDoc = this.view0?.props.Document;
        return !targetDoc ? null : (
            <Tooltip title={<div className="dash-tooltip">{`Open Context Menu`}</div>}>
                <div className="documentButtonBar-icon" style={{ color: 'white', cursor: 'pointer' }} onClick={e => this.openContextMenu(e)}>
                    <FontAwesomeIcon className="documentdecorations-icon" icon="bars" />
                </div>
            </Tooltip>
        );
    }
    @computed
    get metadataButton() {
        const view0 = this.view0;
        return !view0 ? null : (
            <Tooltip title={<div className="dash-tooltip">Show metadata panel</div>}>
                <div className="documentButtonBar-linkFlyout">
                    <Flyout
                        anchorPoint={anchorPoints.LEFT_TOP}
                        content={
                            <MetadataEntryMenu
                                docs={this.props
                                    .views()
                                    .filter(dv => dv)
                                    .map(dv => dv!.props.Document)}
                                suggestWithFunction
                            /> /* tfs: @bcz This might need to be the data document? */
                        }>
                        <div className={'documentButtonBar-linkButton-' + 'empty'} onPointerDown={e => e.stopPropagation()}>
                            {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" />}
                        </div>
                    </Flyout>
                </div>
            </Tooltip>
        );
    }

    @observable _isRecording = false;
    _stopFunc: () => void = emptyFunction;
    @computed
    get recordButton() {
        const targetDoc = this.view0?.props.Document;
        return !targetDoc ? null : (
            <Tooltip title={<div className="dash-tooltip">Press to record audio annotation</div>}>
                <div
                    className="documentButtonBar-icon"
                    style={{ backgroundColor: this._isRecording ? Colors.ERROR_RED : Colors.DARK_GRAY, color: Colors.WHITE }}
                    onPointerDown={action((e: React.PointerEvent) => {
                        this._isRecording = true;
                        this.props.views().map(view => view && DocumentViewInternal.recordAudioAnnotation(view.dataDoc, view.LayoutFieldKey, stopFunc => (this._stopFunc = stopFunc), emptyFunction));
                        const b = UndoManager.StartBatch('Recording');
                        setupMoveUpEvents(
                            this,
                            e,
                            returnFalse,
                            action(() => {
                                this._isRecording = false;
                                this._stopFunc();
                            }),
                            emptyFunction
                        );
                    })}>
                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="microphone" />
                </div>
            </Tooltip>
        );
    }
    @observable _aliasDown = false;
    onTemplateButton = action((e: React.PointerEvent): void => {
        this._tooltipOpen = false;
        setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction);
    });
    onAliasButtonMoved = () => {
        if (this._dragRef.current) {
            const dragDocView = this.view0!;
            const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]);
            const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
            dragData.defaultDropAction = 'alias';
            dragData.canEmbed = true;
            DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { hideSource: false });
            return true;
        }
        return false;
    };

    _ref = React.createRef<HTMLDivElement>();
    @observable _tooltipOpen: boolean = false;
    @computed
    get templateButton() {
        const view0 = this.view0;
        const views = this.props.views();
        return !view0 ? null : (
            <Tooltip title={<div className="dash-tooltip">Tap to Customize Layout. Drag an embeddable alias</div>} open={this._tooltipOpen} onClose={action(() => (this._tooltipOpen = false))} placement="bottom">
                <div className="documentButtonBar-linkFlyout" ref={this._dragRef} onPointerEnter={action(() => !this._ref.current?.getBoundingClientRect().width && (this._tooltipOpen = true))}>
                    <Flyout
                        anchorPoint={anchorPoints.LEFT_TOP}
                        onOpen={action(() => (this._aliasDown = true))}
                        onClose={action(() => (this._aliasDown = false))}
                        content={
                            !this._aliasDown ? null : (
                                <div ref={this._ref}>
                                    {' '}
                                    <TemplateMenu docViews={views.filter(v => v).map(v => v as DocumentView)} />
                                </div>
                            )
                        }>
                        <div className={'documentButtonBar-linkButton-empty'} ref={this._dragRef} onPointerDown={this.onTemplateButton}>
                            {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />}
                        </div>
                    </Flyout>
                </div>
            </Tooltip>
        );
    }

    openContextMenu = (e: React.MouseEvent) => {
        let child = SelectionManager.Views()[0].ContentDiv!.children[0];
        while (child.children.length) {
            const next = Array.from(child.children).find(c => c.className?.toString().includes('SVGAnimatedString') || typeof c.className === 'string');
            if (next?.className?.toString().includes(DocumentView.ROOT_DIV)) break;
            if (next?.className?.toString().includes(DashFieldView.name)) break;
            if (next) child = next;
            else break;
        }
        simulateMouseClick(child, e.clientX, e.clientY - 30, e.screenX, e.screenY - 30);
    };

    @observable _showLinkPopup = false;
    @action
    toggleLinkSearch = (e: React.PointerEvent) => {
        this._showLinkPopup = !this._showLinkPopup;
        e.stopPropagation();
    };
    render() {
        if (!this.view0) return null;

        const isText = this.view0.props.Document[this.view0.LayoutFieldKey] instanceof RichTextField;
        const doc = this.view0?.props.Document;
        const considerPull = isText && this.considerGoogleDocsPull;
        const considerPush = isText && this.considerGoogleDocsPush;
        return (
            <div className="documentButtonBar">
                <div className="documentButtonBar-button">
                    <DocumentLinksButton View={this.view0} AlwaysOn={true} InMenu={true} ShowCount={true} />
                </div>
                {this._showLinkPopup ? (
                    <div style={{ position: 'absolute', zIndex: 1000 }}>
                        <LinkPopup
                            key="popup"
                            showPopup={this._showLinkPopup}
                            linkCreated={link => (link.linkDisplay = !this.props.views().lastElement()?.rootDoc.isLinkButton)}
                            linkCreateAnchor={() => this.props.views().lastElement()?.ComponentView?.getAnchor?.()}
                            linkFrom={() => this.props.views().lastElement()?.rootDoc}
                        />
                    </div>
                ) : (
                    <div className="documentButtonBar-button">{this.linkButton}</div>
                )}

                {(DocumentLinksButton.StartLink || Doc.UserDoc()['documentLinksButton-fullMenu']) && DocumentLinksButton.StartLink !== doc ? (
                    <div className="documentButtonBar-button">
                        <DocumentLinksButton View={this.view0} AlwaysOn={true} InMenu={true} StartLink={false} />
                    </div>
                ) : null}
                {
                    Doc.noviceMode ? null : <div className="documentButtonBar-button">{this.templateButton}</div>
                    /*<div className="documentButtonBar-button"> {this.metadataButton} </div> */
                }
                {!SelectionManager.Views()?.some(v => v.allLinks.length) ? null : <div className="documentButtonBar-button">{this.followLinkButton}</div>}
                <div className="documentButtonBar-button">{this.pinButton}</div>
                <div className="documentButtonBar-button">{this.recordButton}</div>
                {!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : <div className="documentButtonBar-button">{this.shareButton}</div>}
                {!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : (
                    <div className="documentButtonBar-button" style={{ display: !considerPush ? 'none' : '' }}>
                        {this.considerGoogleDocsPush}
                    </div>
                )}
                <div className="documentButtonBar-button" style={{ display: !considerPull ? 'none' : '' }}>
                    {this.considerGoogleDocsPull}
                </div>
                <div className="documentButtonBar-button">{this.menuButton}</div>
            </div>
        );
    }
}