import { computed } from "mobx";
import { observer } from "mobx-react";
import { Id } from "../../../../fields/FieldSymbols";
import { DocumentManager } from "../../../util/DocumentManager";
import "./CollectionFreeFormLinksView.scss";
import { CollectionFreeFormLinkView } from "./CollectionFreeFormLinkView";
import React = require("react");

@observer
export class CollectionFreeFormLinksView extends React.Component {
    @computed get uniqueConnections() {
        return Array.from(new Set(DocumentManager.Instance.LinkedDocumentViews)).map(c =>
            <CollectionFreeFormLinkView key={c.l[Id]} A={c.a} B={c.b} LinkDocs={[c.l]} />
        );
    }

    render() {
        return <div className="collectionfreeformlinksview-container">
            <svg className="collectionfreeformlinksview-svgCanvas">
                {this.uniqueConnections}
            </svg>
            {this.props.children}
        </div>;
    }
}