export function createInfoView(options) {

    let width = 300;
    let height = 400;

    // let font.baseSize = 16;
    // let font.ratio.large = 2.369;
    // let font.ratio.medium = 1.333;

    // let font = {
    //     baseSize: 16,
    //     ratio: {
    //         large: 2.369,
    //         medium: 1.333,
    //         small: 1
    //     }
    // };

    // let highlightColour = '#f84';
    // let textColour = '#48f';
    // let bgColour = 'rgba(20,20,20,0.2)';
    let colours;
    let font;

    let infoGroup = undefined;
    let labels = undefined;
    let lang = undefined;


    function infoView(selection) {

        infoGroup = selection.append('g')
            .attr('class', 'info-view')
            .classed('hidden', true);

        infoGroup.append('rect')
            .attr('class', 'info-frame')
            .attr('fill', colours.translucent)
            .attr('width', width)
            .attr('height', height);

        let ilink = infoGroup.append('svg:a')
            .attr('id', 'ilink')
            .attr('target', '_blank');

        ilink.append('svg:rect')
            .attr('height', 0)
            .attr('width', 0)
            .attr('fill', 'rgba(255,255,255,0.0)');

        let itext = ilink.append('text')
            .attr('transform', 'translate(' +
                (font.ratio.large * font.baseSize) + ',' +
                (font.ratio.large * font.baseSize) + ')')
            .attr('fill', colours.text);

        itext.append('tspan')
            .attr('id', 'ititle');

        itext.append('tspan')
            .attr('x', 0)
            .attr('dy', font.ratio.large + 'em')
            .attr('id', 'iinfo');

        itext.append('tspan')
            .attr('x', 0)
            .attr('dy', font.ratio.medium + 'em')
            .attr('id', 'ievidence');

        itext.append('tspan')
            .attr('x', 0)
            .attr('dy', font.ratio.medium + 'em')
            .attr('id', 'iinfluence');

        itext.append('tspan')
            .attr('x', 0)
            .attr('id', 'isource')
            .attr('dy', font.ratio.medium + 'em');

        itext.append('tspan')
            .attr('x', 0)
            .attr('id', 'ireference')
            .attr('dy', font.ratio.medium + 'em');

        let closeButton = infoGroup.append('g')
            .attr('transform', 'translate(' +
                (width - font.ratio.large * font.baseSize) + ', ' +
                (font.ratio.medium * font.baseSize) + ') scale(0.8,0.8)')
            .attr('id', 'close-button')
            .attr('class', 'button close')
            .on('click', infoView.hideInfo);

        closeButton.append('circle')
            .attr('r', font.ratio.medium * font.baseSize * 0.6)
            .attr('cx', font.ratio.medium * font.baseSize * 0.5)
            .attr('cy', font.ratio.medium * font.baseSize * 0.5)
            .attr('fill', colours.text);

        closeButton.append('use')
            .attr('xlink:href', '#circle-x')
            .attr('fill', colours.translucent)
            .attr('width', font.ratio.medium * font.baseSize)
            .attr('height', font.ratio.medium * font.baseSize);
    }


    infoView.showInfo = function(d) {

        console.log(d);
        if(d.reason.info) {
            infoGroup.classed('hidden', false);
            infoGroup.select('#ititle')
                .text(d.reason.title);
            infoGroup.select('#iinfo')
                // .text('Zeitraum: ' + d.reason.info);
                .text(labels.timescale[lang] + ': ' + d.reason.info);
            infoGroup.select('#iinfluence')
                .text(labels.influence[lang] + ': ' + d.reason.cat);
            infoGroup.select('#ievidence')
                .text(labels.evidence[lang] + ': ' + d.reason.evidence);

            if(d.reason.source.indexOf('http') !== -1) {
                let ilink = infoGroup.select('#ilink')
                    .attr('xlink:href', d.reason.source);

                ilink.select('rect')
                    .attr('height', height)
                    .attr('width', width)
                    .attr('stroke-width', 2)
                    .attr('stroke', colours.highlight);

                let ustart = d.reason.source.indexOf('//') + 2;
                let uend = d.reason.source.indexOf('/', ustart);
                let url = d.reason.source.substr(0, uend);
                infoGroup.select('#isource').text(labels.source[lang] + ': ' + url + ', ' + d.reason.year);
            } else {
                infoGroup.select('#isource').text(labels.source[lang] + ': ' + d.reason.source + ', ' + d.reason.year);
                let ilink = infoGroup.select('#ilink')
                    .attr('xlink:href', '#');
                ilink.select('rect')
                    .attr('stroke', 'none')
                    .attr('height', 0)
                    .attr('width', 0);
            }

            infoGroup.select('#ireference')
                .text(labels.referenceGroup.name[lang] + ': ' + d.reason.referenceGroup);
        }
    };

    infoView.hideInfo = function() {
        infoGroup.classed('hidden', true);
        infoGroup.select('#ititle')
            .text('');
        infoGroup.select('#iinfo')
            .text('');
        infoGroup.select('#iinfluence')
            .text('');
        infoGroup.select('#ievidence')
            .text('');
        infoGroup.select('#isource')
            .text('');
        infoGroup.select('#ireference')
            .text('');
    };

    infoView.lang = function(val) {
        if(!arguments.length) {
            return lang;
        }
        lang = val;
        return infoView;
    };

    infoView.labels = function(val) {
        if(!arguments.length) {
            return labels;
        }
        labels = val;
        return infoView;
    };

    infoView.width = function(val) {
        if(!arguments.length) {
            return width;
        }
        width = val;
        return infoView;
    };

    infoView.height = function(val) {
        if(!arguments.length) {
            return height;
        }
        height = val;
        return infoView;
    };

    infoView.colours = function(val) {
        if(!arguments.length) {
            return colours;
        }
        colours = val;
        return infoView;
    };

    infoView.font = function(val) {
        if(!arguments.length) {
            return font;
        }
        font = val;
        return infoView;
    };
    // infoView.textColour = function(val) {
    //     if(!arguments.length) {
    //         return textColour;
    //     }
    //     textColour = val;
    //     return infoView;
    // };

    // infoView.bgColour = function(val) {
    //     if(!arguments.length) {
    //         return bgColour;
    //     }
    //     bgColour = val;
    //     return infoView;
    // };

    // infoView.highlightColour = function(val) {
    //     if (!arguments.length) {
    //         return highlightColour;
    //     }
    //     highlightColour = val;
    //     return infoView;
    // };

    infoView.colours(options.common.colours);
    infoView.font(options.common.font);
    infoView.lang(options.common.lang);
    infoView.labels(options.common.labels);
    infoView.width(options.width);
    infoView.height(options.height);
    return infoView;
}
