import { computed } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, DocListCast } from '../../fields/Doc';
import { Cast } from '../../fields/Types';
import { DocumentType } from '../documents/DocumentTypes';
import { LinkManager } from '../util/LinkManager';
import { SelectionManager } from '../util/SelectionManager';
import { LinkMenu } from './linking/LinkMenu';
import { OpenWhere, OpenWhereMod } from './nodes/DocumentView';
import './PropertiesDocBacklinksSelector.scss';

type PropertiesDocBacklinksSelectorProps = {
    Document: Doc;
    Stack?: any;
    hideTitle?: boolean;
    addDocTab(doc: Doc, location: OpenWhere): void;
};

@observer
export class PropertiesDocBacklinksSelector extends React.Component<PropertiesDocBacklinksSelectorProps> {
    @computed get _docs() {
        const linkSource = this.props.Document;
        const links = DocListCast(linkSource.links);
        const collectedLinks = [] as Doc[];
        links.map(link => {
            const other = LinkManager.getOppositeAnchor(link, linkSource);
            const otherdoc = !other ? undefined : other.annotationOn && other.type !== DocumentType.RTF ? Cast(other.annotationOn, Doc, null) : other;
            if (otherdoc && !collectedLinks.some(d => Doc.AreProtosEqual(d, otherdoc))) {
                collectedLinks.push(otherdoc);
            }
        });
        return collectedLinks;
    }

    getOnClick = (link: Doc) => {
        const linkSource = this.props.Document;
        const other = LinkManager.getOppositeAnchor(link, linkSource);
        const otherdoc = !other ? undefined : other.annotationOn && other.type !== DocumentType.RTF ? Cast(other.annotationOn, Doc, null) : other;

        if (otherdoc) {
            otherdoc.hidden = false;
            this.props.addDocTab(Doc.IsPrototype(otherdoc) ? Doc.MakeDelegate(otherdoc) : otherdoc, (OpenWhere.toggle + ':' + OpenWhereMod.right) as OpenWhere);
        }
    };

    render() {
        return !SelectionManager.Views().length ? null : (
            <div className="preroptiesDocBacklinksSelector">
                {this.props.hideTitle ? null : <p key="contexts">Contexts:</p>}
                <LinkMenu docView={SelectionManager.Views().lastElement()} clearLinkEditor={undefined} itemHandler={this.getOnClick} style={{ left: 0, top: 0 }} />
            </div>
        );
    }
}