/**
 * Created by Samuel Gratzl on 28.02.2017.
 */
import { event as d3event, select, time } from 'd3';
import * as $ from 'jquery';
import { generateDialog, areyousure } from 'phovea_ui/src/dialogs';
import { isLoggedIn } from 'phovea_core/src/security';
var ProvenanceGraphMenu = (function () {
    function ProvenanceGraphMenu(manager, parent, appendChild) {
        if (appendChild === void 0) { appendChild = true; }
        this.manager = manager;
        this.$node = this.init(parent);
        if (appendChild) {
            parent.appendChild(this.node);
        }
    }
    Object.defineProperty(ProvenanceGraphMenu.prototype, "node", {
        get: function () {
            return this.$node.node();
        },
        enumerable: true,
        configurable: true
    });
    ProvenanceGraphMenu.prototype.setGraph = function (graph) {
        this.$node.select('#provenancegraph_name').text(graph.desc.name);
        this.graph = graph;
    };
    ProvenanceGraphMenu.prototype.init = function (parent) {
        var _this = this;
        var manager = this.manager;
        //add provenance graph management menu entry
        var ul = parent.ownerDocument.createElement('ul');
        var $ul = select(ul)
            .attr('class', 'nav navbar-nav navbar-right')
            .attr('data-clue', 'provenanceGraphList')
            .html("<li class=\"dropdown\">\n        <a class=\"active\" href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\n          <i class=\"fa fa-code-fork fa-lg fa-rotate-180 fa-fw\"></i>\n        </a>\n        <ul class=\"dropdown-menu\" id=\"provenancegraph_list\">\n          <li role=\"separator\" class=\"divider\"></li>\n          <li>\n            <a href=\"#\" id=\"provenancegraph_import\">\n              <i class=\"fa fa-upload\" aria-hidden=\"true\"></i> Import ...\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"login_required disabled\" disabled=\"disabled\" id=\"provenancegraph_import_remote\">\n              <i class=\"fa fa-cloud-upload\" aria-hidden=\"true\"></i> Import Remote ...\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" id=\"provenancegraph_export\">\n              <i class=\"fa fa-download\" aria-hidden=\"true\"></i> Export ...\n            </a>\n          </li>\n          <li role=\"separator\" class=\"divider\"></li>\n          <li>\n            <a href=\"#\" id=\"provenancegraph_new\">\n              <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> New ...\n            </a>\n          </li>\n          <li>\n            <a href=\"#\" class=\"login_required disabled\" disabled=\"disabled\" id=\"provenancegraph_new_remote\">\n              <i class=\"fa fa-cloud\" aria-hidden=\"true\"></i> New Remote...\n            </a>\n          </li>\n        </ul>\n      </li>");
        //new button
        $ul.select('#provenancegraph_new_remote').on('click', function () {
            d3event.preventDefault();
            manager.newRemoteGraph();
        });
        //new local
        $ul.select('#provenancegraph_new').on('click', function () {
            d3event.preventDefault();
            manager.newGraph();
        });
        $ul.select('#provenancegraph_export').on('click', function () {
            var e = d3event;
            e.preventDefault();
            e.stopPropagation();
            console.log(_this.graph);
            var r = _this.graph.persist();
            console.log(r);
            var str = JSON.stringify(r, null, '\t');
            //create blob and save it
            var blob = new Blob([str], { type: 'application/json;charset=utf-8' });
            var a = new FileReader();
            a.onload = function (e) {
                var url = e.target.result;
                var helper = parent.ownerDocument.createElement('a');
                helper.setAttribute('href', url);
                helper.setAttribute('target', '_blank');
                helper.setAttribute('download', _this.graph.desc.name + ".json");
                helper.click();
                helper.remove();
            };
            a.readAsDataURL(blob);
            return false;
        });
        $ul.selectAll('#provenancegraph_import, #provenancegraph_import_remote').on('click', function () {
            var e = d3event;
            e.preventDefault();
            e.stopPropagation();
            var remote = this.id === 'provenancegraph_import_remote';
            //import dialog
            var d = generateDialog('Select File', 'Upload');
            d.body.innerHTML = "<input type=\"file\" placeholder=\"Select File to Upoad\">";
            select(d.body).select('input').on('change', function () {
                var file = d3event.target.files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    var dataS = e.target.result;
                    var dump = JSON.parse(dataS);
                    manager.importGraph(dump, remote);
                };
                // Read in the image file as a data URL.
                reader.readAsText(file);
            });
            d.show();
        });
        return $ul;
    };
    ProvenanceGraphMenu.prototype.build = function (graphs) {
        var manager = this.manager;
        var $list = this.$node.select('#provenancegraph_list').selectAll('li.graph').data(graphs);
        $list.enter().insert('li', ':first-child')
            .classed('graph', true)
            .html(function (d) { return "<a href=\"#clue_graph=" + d.id + "\"><i class=\"fa fa-code-fork fa-rotate-180\" aria-hidden=\"true\"></i> " + d.name + " </a>"; })
            .select('a').on('click', function (d) {
            d3event.preventDefault();
            manager.loadGraph(d);
        });
        var format = time.format.utc('%Y-%m-%dT%H:%M');
        $('#provenancegraph_list li.graph a').popover({
            html: true,
            placement: 'left',
            trigger: 'manual',
            title: function () {
                var graph = select(this).datum();
                return "" + graph.name;
            },
            content: function () {
                var graph = select(this).datum();
                var creator = graph.creator;
                var description = graph.description || '';
                var ts = graph.ts ? format(new Date(graph.ts)) : 'Unknown';
                var nnodes = graph.size[0];
                var nedges = graph.size[1];
                //const locked = false;
                var $elem = $("\n            <div class=\"container-fluid\">\n            <div class=\"row\">\n                <div class=\"col-sm-3\">creator:</div>\n                <div class=\"col-sm-9\">" + creator + "</div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-3\">created:</div>\n                <div class=\"col-sm-9\">" + ts + "</div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-3\">description:</div>\n                <div class=\"col-sm-9\">" + description + "</div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-3\">nodes/edges:</div>\n                <div class=\"col-sm-9\">" + nnodes + "/" + nedges + "</div>\n            </div>\n            <div class=\"row\">\n                <div class=\"col-sm-12 text-right\">\n                    <button class=\"btn btn-primary\" " + (!isLoggedIn() && !graph.local ? 'disabled="disabled"' : '') + " data-action=\"select\" data-toggle=\"modal\"><span class=\"fa fa-folder-open\" aria-hidden=\"true\"></span> Select</button>\n                    <button class=\"btn btn-primary\" data-action=\"clone\" data-toggle=\"modal\"><span class=\"fa fa-clone\" aria-hidden=\"true\"></span> Clone</button>\n                    <button class=\"btn btn-danger\" " + (!isLoggedIn() && !graph.local ? 'disabled="disabled"' : '') + " data-toggle=\"modal\"><i class=\"fa fa-trash\" aria-hidden=\"true\"></i> Delete</button>\n                </div>\n            </div>\n        </div>");
                $elem.find('button.btn-danger').on('click', function () {
                    areyousure('Are you sure to delete: "' + graph.name + '"').then(function (deleteIt) {
                        if (deleteIt) {
                            manager.delete(graph);
                        }
                    });
                });
                $elem.find('button.btn-primary').on('click', function () {
                    var isSelect = this.dataset.action === 'select';
                    manager.loadOrClone(graph, isSelect);
                    return false;
                });
                return $elem;
            }
        }).parent().on({
            mouseenter: function () {
                $(this).find('a').popover('show');
            },
            mouseleave: function () {
                $(this).find('a').popover('hide');
            }
        });
    };
    return ProvenanceGraphMenu;
}());
export default ProvenanceGraphMenu;
//# sourceMappingURL=ProvenanceGraphMenu.js.map