/**
 * Created by michaelbessey on 10/15/16.
 */

// declare let d3;
import * as d3 from "d3";

import {Component} from "./component";

export class HistogramComponentSvg extends Component {

    constructor(parentSelector: string, selector: string = ".histogram") {
        super(parentSelector, selector);
    }

    updateView(parent, viewModel): HistogramComponentSvg {

        let histGroup = parent.select("g" + this.selector),
            bars;

        if (histGroup.empty()) {
            histGroup = parent.append("g").attr("class", super.getClassName());
        }
        else {
            // remove and redraw everything
            histGroup.selectAll("*").remove();
        }

        histGroup.selectAll(".bar")
            .data(viewModel.dataArray)
            .enter()
            .append("g")
            .attr("class", "bar");

        histGroup.selectAll(".bar")
            .data(viewModel.dataArray, viewModel.keyMap)
            .exit()
            .remove();

        bars = histGroup
            .selectAll(".bar")
            .data(viewModel.dataArray)
            .attr("transform", (d, i) => {
                let x = d.x, y = d.y;
                return `translate(${x}, ${y})`;
            })
            .append("rect")
            .attr("x", 1)
            .attr("width", (d, i) => { return d.width; } )
            .attr("height", (d, i) => { return d.height; })
            .style("fill", (d) => { return d.color; });

        this.addBehavior(bars, "mouseover");
        this.addBehavior(bars, "mousemove");
        this.addBehavior(bars, "mouseout");
        this.addBehavior(bars, "click");

        return this;
    }
}