import { computed } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
import { Doc, DocListCast } from "../../fields/Doc";
import { Id } from "../../fields/FieldSymbols";
import { Cast, NumCast, StrCast } from "../../fields/Types";
import { LinkManager } from "../util/LinkManager";
import { CollectionDockingView } from "./collections/CollectionDockingView";
import { CollectionViewType } from "./collections/CollectionView";
import './PropertiesDocContextSelector.scss';

type PropertiesDocBacklinksSelectorProps = {
    Document: Doc,
    Stack?: any,
    hideTitle?: boolean,
    addDocTab(doc: Doc, location: string): 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 ? Cast(other.annotationOn, Doc, null) : other;
            if (otherdoc && !collectedLinks.some(d => Doc.AreProtosEqual(d, otherdoc))) {
                collectedLinks.push(otherdoc);
            }
        });
        return collectedLinks;
    }

    getOnClick = (col: Doc) => {
        col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col;
        this.props.addDocTab(col, "add:right");
    }

    render() {
        return <div>
            {this.props.hideTitle ? (null) : <p key="contexts">Contexts:</p>}
            {this._docs.map(doc => <p key={doc[Id]}><a onClick={() => this.getOnClick(doc)}>{StrCast(doc.title)}</a></p>)}
        </div>;
    }
}