import * as d3 from './d3-custom';

export function createZoomButtons(options) {

    let controller;
    let colours;
    let font;

    let x, y;
    let radius = 25;

    function zoomButtons(selection) {
        let btnGroup = selection.append('g')
            .attr('class', 'zoom-buttons')
            .attr('transform', 'translate(' + x + ',' + (y / 2) + ')');

        let zoomInBtn = btnGroup.append('g')
            .attr('id', 'zoom-in-button')
            .attr('class', 'zoom button')
            .on('mouseover', function () {
                d3.select(this).select('use')
                    .attr('fill', colours.highlight)
                    .attr('stroke', colours.bright);
            })
            .on('mouseout', function () {
                d3.select(this).select('use')
                    .attr('fill', colours.bright)
                    .attr('stroke', 'none');
            })
            .on('click', controller.zoomIn.bind(controller));

        zoomInBtn.append('use')
            .attr('xlink:href', '#data-transfer-download')
            .attr('fill', colours.bright)
            .attr('stroke-width', 0.5)
            .attr('width', radius)
            .attr('height', radius);

        zoomInBtn.attr('transform', 'matrix(1, 0, 0, 1, 0,' + (radius + font.baseSize) + ')');

        let zoomOutBtn = btnGroup.append('g')
            .attr('id', 'zoom-out-button')
            .attr('class', 'zoom button')
            .on('mouseover', function () {
                d3.select(this).select('use')
                    .attr('fill', colours.highlight)
                    .attr('stroke', colours.bright);
            })
            .on('mouseout', function () {
                d3.select(this).select('use')
                    .attr('fill', colours.bright)
                    .attr('stroke', 'none');
            })
            .on('click', controller.zoomOut.bind(controller));

        zoomOutBtn.append('use')
            .attr('xlink:href', '#data-transfer-upload')
            .attr('fill', colours.bright)
            .attr('stroke-width', 0.5)
            .attr('width', radius)
            .attr('height', radius);

        zoomInBtn.attr('transform', 'matrix(1, 0, 0, 1, 0,' + (-radius - font.baseSize) + ')');
    }

    zoomButtons.x = function(val) {
        if (!arguments.length) {
            return x;
        }
        x = val;
        return zoomButtons;
    };

    zoomButtons.y = function(val) {
        if (!arguments.length) {
            return y;
        }
        y = val;
        return zoomButtons;
    };

    zoomButtons.radius = function(val) {
        if (!arguments.length) {
            return radius;
        }
        radius = val;
        return zoomButtons;
    };

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

    zoomButtons.controller = function(val) {
        if (!arguments.length) {
            return controller;
        }
        controller = val;
        return zoomButtons;
    };

    zoomButtons.font = function(val) {
        if (!arguments.length) {
            return font;
        }
        font = val;
        return zoomButtons;
    };

    zoomButtons.controller(options.common.controller);
    zoomButtons.font(options.common.font);
    zoomButtons.colours(options.common.colours);
    zoomButtons.x(options.x);
    zoomButtons.y(options.y);
    return zoomButtons;
}
