import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import wiki from 'wikijs';
import { Doc, DocCastAsync, Opt } from '../../../fields/Doc';
import { Height, Width } from '../../../fields/DocSymbols';
import { Cast, DocCast, NumCast, PromiseValue, StrCast } from '../../../fields/Types';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../Utils';
import { DocServer } from '../../DocServer';
import { Docs } from '../../documents/Documents';
import { DocumentType } from '../../documents/DocumentTypes';
import { DragManager } from '../../util/DragManager';
import { LinkFollower } from '../../util/LinkFollower';
import { LinkManager } from '../../util/LinkManager';
import { SettingsManager } from '../../util/SettingsManager';
import { Transform } from '../../util/Transform';
import { SearchBox } from '../search/SearchBox';
import { DocumentView, DocumentViewSharedProps, OpenWhere } from './DocumentView';
import './LinkDocPreview.scss';
import React = require('react');

interface LinkDocPreviewProps {
    linkDoc?: Doc;
    linkSrc?: Doc;
    docProps: DocumentViewSharedProps;
    location: number[];
    hrefs?: string[];
    showHeader?: boolean;
    noPreview?: boolean;
}
@observer
export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
    @action public static Clear() {
        LinkDocPreview.LinkInfo = undefined;
    }
    @action public static SetLinkInfo(info?: LinkDocPreviewProps) {
        LinkDocPreview.LinkInfo !== info && (LinkDocPreview.LinkInfo = info);
    }

    static _instance: Opt<LinkDocPreview>;

    _infoRef = React.createRef<HTMLDivElement>();
    _linkDocRef = React.createRef<HTMLDivElement>();
    @observable public static LinkInfo: Opt<LinkDocPreviewProps>;
    @observable _targetDoc: Opt<Doc>;
    @observable _markerTargetDoc: Opt<Doc>;
    @observable _linkDoc: Opt<Doc>;
    @observable _linkSrc: Opt<Doc>;
    @observable _toolTipText = '';
    @observable _hrefInd = 0;

    constructor(props: any) {
        super(props);
        LinkDocPreview._instance = this;
    }

    @action init() {
        var linkTarget = this.props.linkDoc;
        this._linkSrc = this.props.linkSrc;
        this._linkDoc = this.props.linkDoc;
        const link_anchor_1 = this._linkDoc?.link_anchor_1 as Doc;
        const link_anchor_2 = this._linkDoc?.link_anchor_2 as Doc;
        if (link_anchor_1 && link_anchor_2) {
            linkTarget = Doc.AreProtosEqual(link_anchor_1, this._linkSrc) || Doc.AreProtosEqual(link_anchor_1?.annotationOn as Doc, this._linkSrc) ? link_anchor_2 : link_anchor_1;
        }
        if (linkTarget?.annotationOn && linkTarget?.type !== DocumentType.RTF) {
            // want to show annotation embedContainer document if annotation is not text
            linkTarget && DocCastAsync(linkTarget.annotationOn).then(action(anno => (this._markerTargetDoc = this._targetDoc = anno)));
        } else {
            this._markerTargetDoc = this._targetDoc = linkTarget;
        }
        this._toolTipText = '';
        this.updateHref();
    }
    componentDidUpdate(props: any) {
        if (props.linkSrc !== this.props.linkSrc || props.linkDoc !== this.props.linkDoc || props.hrefs !== this.props.hrefs) this.init();
    }
    componentDidMount() {
        this.init();
        document.addEventListener('pointerdown', this.onPointerDown, true);
    }

    @action
    componentWillUnmount() {
        LinkDocPreview.SetLinkInfo(undefined);
        document.removeEventListener('pointerdown', this.onPointerDown, true);
    }

    onPointerDown = (e: PointerEvent) => {
        !this._linkDocRef.current?.contains(e.target as any) && LinkDocPreview.Clear(); // close preview when not clicking anywhere other than the info bar of the preview
    };

    @action
    updateHref() {
        if (this.props.hrefs?.length) {
            const href = this.props.hrefs[this._hrefInd];
            if (href.indexOf(Doc.localServerPath()) !== 0) {
                // link to a web page URL -- try to show a preview
                if (href.startsWith('https://en.wikipedia.org/wiki/')) {
                    wiki()
                        .page(href.replace('https://en.wikipedia.org/wiki/', ''))
                        .then(page => page.summary().then(action(summary => (this._toolTipText = summary.substring(0, 500)))));
                } else {
                    this._toolTipText = 'url => ' + href;
                }
            } else {
                // hyperlink to a document .. decode doc id and retrieve from the server. this will trigger vals() being invalidated
                const anchorDocId = href.replace(Doc.localServerPath(), '').split('?')[0];
                const anchorDoc = anchorDocId ? PromiseValue(DocCast(DocServer.GetCachedRefField(anchorDocId) ?? DocServer.GetRefField(anchorDocId))) : undefined;
                anchorDoc?.then?.(
                    action(anchor => {
                        if (anchor instanceof Doc && LinkManager.Links(anchor).length) {
                            this._linkDoc = this._linkDoc ?? LinkManager.Links(anchor)[0];
                            const automaticLink = this._linkDoc.link_relationship === LinkManager.AutoKeywords;
                            if (automaticLink) {
                                // automatic links specify the target in the link info, not the source
                                const linkTarget = anchor;
                                this._linkSrc = LinkManager.getOppositeAnchor(this._linkDoc, linkTarget);
                                this._markerTargetDoc = this._targetDoc = linkTarget;
                            } else {
                                this._linkSrc = anchor;
                                const linkTarget = LinkManager.getOppositeAnchor(this._linkDoc, this._linkSrc);
                                this._markerTargetDoc = linkTarget;
                                this._targetDoc = /*linkTarget?.type === DocumentType.MARKER &&*/ linkTarget?.annotationOn ? Cast(linkTarget.annotationOn, Doc, null) ?? linkTarget : linkTarget;
                            }
                            if (LinkDocPreview.LinkInfo?.noPreview || this._linkSrc?.followLinkToggle || this._markerTargetDoc?.type === DocumentType.PRES) this.followLink();
                        }
                    })
                );
            }
            return href;
        }
        return undefined;
    }

    @action
    editLink = (e: React.PointerEvent): void => {
        setupMoveUpEvents(
            this,
            e,
            returnFalse,
            emptyFunction,
            action(() => {
                LinkManager.currentLink = this._linkDoc;
                LinkManager.currentLinkAnchor = this._linkSrc;
                this.props.docProps.DocumentView?.().select(false);
                if ((SettingsManager.propertiesWidth ?? 0) < 100) {
                    SettingsManager.propertiesWidth = 250;
                }
            })
        );
    };
    nextHref = (e: React.PointerEvent) => {
        setupMoveUpEvents(
            this,
            e,
            returnFalse,
            emptyFunction,
            action(() => {
                const nextHrefInd = (this._hrefInd + 1) % (this.props.hrefs?.length || 1);
                if (nextHrefInd !== this._hrefInd) {
                    this._linkDoc = undefined;
                    this._hrefInd = nextHrefInd;
                }
            }),
            true
        );
    };

    followLink = () => {
        LinkDocPreview.Clear();
        if (this._linkDoc && this._linkSrc) {
            LinkFollower.FollowLink(this._linkDoc, this._linkSrc, false);
        } else if (this.props.hrefs?.length) {
            const webDoc =
                Array.from(SearchBox.staticSearchCollection(Doc.MyFilesystem, this.props.hrefs[0]).keys()).lastElement() ??
                Docs.Create.WebDocument(this.props.hrefs[0], { title: this.props.hrefs[0], _nativeWidth: 850, _width: 200, _height: 400, data_useCors: true });
            this.props.docProps?.addDocTab(webDoc, OpenWhere.lightbox);
        }
    };

    followLinkPointerDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, returnFalse, emptyFunction, this.followLink);

    width = () => {
        if (!this._targetDoc) return 225;
        if (this._targetDoc[Width]() < this._targetDoc?.[Height]()) {
            return (Math.min(225, this._targetDoc[Height]()) * this._targetDoc[Width]()) / this._targetDoc[Height]();
        }
        return Math.min(225, NumCast(this._targetDoc?.[Width](), 225));
    };
    height = () => {
        if (!this._targetDoc) return 225;
        if (this._targetDoc[Width]() > this._targetDoc?.[Height]()) {
            return (Math.min(225, this._targetDoc[Width]()) * this._targetDoc[Height]()) / this._targetDoc[Width]();
        }
        return Math.min(225, NumCast(this._targetDoc?.[Height](), 225));
    };
    @computed get previewHeader() {
        return !this._linkDoc || !this._markerTargetDoc || !this._targetDoc || !this._linkSrc ? null : (
            <div className="linkDocPreview-info">
                <div className="linkDocPreview-buttonBar" style={{ float: 'left' }}>
                    <Tooltip title={<div className="dash-tooltip">Edit Link</div>} placement="top">
                        <div className="linkDocPreview-button" onPointerDown={this.editLink}>
                            <FontAwesomeIcon className="linkDocPreview-fa-icon" icon="edit" color="white" size="sm" />
                        </div>
                    </Tooltip>
                </div>
                <div className="linkDocPreview-title" style={{ pointerEvents: 'all' }}>
                    {StrCast(this._markerTargetDoc.title).length > 16 ? StrCast(this._markerTargetDoc.title).substr(0, 16) + '...' : StrCast(this._markerTargetDoc.title)}
                    <p className="linkDocPreview-description"> {StrCast(this._linkDoc.link_description)}</p>
                </div>
                <div className="linkDocPreview-buttonBar" style={{ float: 'right' }}>
                    <Tooltip title={<div className="dash-tooltip">Next Link</div>} placement="top">
                        <div className="linkDocPreview-button" style={{ background: (this.props.hrefs?.length || 0) <= 1 ? 'gray' : 'green' }} onPointerDown={this.nextHref}>
                            <FontAwesomeIcon className="linkDocPreview-fa-icon" icon="chevron-right" color="white" size="sm" />
                        </div>
                    </Tooltip>
                </div>
            </div>
        );
    }

    @computed get docPreview() {
        return (!this._linkDoc || !this._targetDoc || !this._linkSrc) && !this._toolTipText ? null : (
            <div className="linkDocPreview-inner">
                {!this.props.showHeader ? null : this.previewHeader}
                <div
                    className="linkDocPreview-preview-wrapper"
                    onPointerDown={e =>
                        setupMoveUpEvents(
                            this,
                            e,
                            (e, down, delta) => {
                                if (Math.abs(e.clientX - down[0]) + Math.abs(e.clientY - down[1]) > 100) {
                                    DragManager.StartDocumentDrag([this._infoRef.current!], new DragManager.DocumentDragData([this._targetDoc!]), e.pageX, e.pageY);
                                    LinkDocPreview.Clear();
                                    return true;
                                }
                                return false;
                            },
                            emptyFunction,
                            this.followLink,
                            true
                        )
                    }
                    ref={this._infoRef}
                    style={{ maxHeight: this._toolTipText ? '100%' : undefined }}>
                    {this._toolTipText ? (
                        this._toolTipText
                    ) : (
                        <DocumentView
                            ref={r => {
                                const targetanchor = this._linkDoc && this._linkSrc && LinkManager.getOppositeAnchor(this._linkDoc, this._linkSrc);
                                targetanchor && this._targetDoc !== targetanchor && r?.props.focus?.(targetanchor, {});
                            }}
                            Document={this._targetDoc!}
                            moveDocument={returnFalse}
                            rootSelected={returnFalse}
                            styleProvider={this.props.docProps?.styleProvider}
                            docViewPath={returnEmptyDoclist}
                            ScreenToLocalTransform={Transform.Identity}
                            isDocumentActive={returnFalse}
                            isContentActive={returnFalse}
                            addDocument={returnFalse}
                            layout_showTitle={returnEmptyString}
                            removeDocument={returnFalse}
                            addDocTab={returnFalse}
                            pinToPres={returnFalse}
                            dontRegisterView={true}
                            docFilters={returnEmptyFilter}
                            docRangeFilters={returnEmptyFilter}
                            searchFilterDocs={returnEmptyDoclist}
                            renderDepth={0}
                            suppressSetHeight={true}
                            PanelWidth={this.width}
                            PanelHeight={this.height}
                            pointerEvents={returnNone}
                            focus={emptyFunction}
                            whenChildContentsActiveChanged={returnFalse}
                            ignoreAutoHeight={true} // need to ignore layout_autoHeight otherwise layout_autoHeight text boxes will expand beyond the preview panel size.
                            bringToFront={returnFalse}
                            NativeWidth={Doc.NativeWidth(this._targetDoc) ? () => Doc.NativeWidth(this._targetDoc) : undefined}
                            NativeHeight={Doc.NativeHeight(this._targetDoc) ? () => Doc.NativeHeight(this._targetDoc) : undefined}
                        />
                    )}
                </div>
            </div>
        );
    }

    render() {
        const borders = 16; // 8px border on each side
        return (
            <div
                className="linkDocPreview"
                ref={this._linkDocRef}
                onPointerDown={this.followLinkPointerDown}
                style={{ left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders + (this.props.showHeader ? 37 : 0) }}>
                {this.docPreview}
            </div>
        );
    }
}