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

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

import {Component} from "./component";

export class BarComponentSvg extends Component {

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

    updateView(parent, viewModel): BarComponentSvg {

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

        if (barGroup.empty()) {
            barGroup = parent.append("g").attr("class", super.getClassName());
        }
        // create bars new from data array
        bars = barGroup.selectAll("rect")
            .data(viewModel.dataArray, viewModel.keyMap)
            .enter()
            .append("rect");
        // delete bars not in the data array
        barGroup.selectAll("rect")
            .data(viewModel.dataArray, viewModel.keyMap)
            .exit()
            .remove();
        // update bars
        bars = barGroup.selectAll("rect")
            .data(viewModel.dataArray, viewModel.keyMap)
            .attr("class", (d, i) => {
                let c = "bar " + d.categoryAttr;
                if(d.value > 0){
                    c = c + " positive";
                }
                else if(d.value < 0){
                    c = c + " negative";
                }
                return c;
            })
            .attr("x", (d) => { return d.x; })
            .attr("y", (d) => { return d.y; })
            .attr("width", (d) => { return d.width; })
            .attr("height", (d) => { return d.height; })
            .attr("fill", (d) => { return d.color.value; });

        //TODO: Add animation for both vertical and horizontal bar charts
        // if(this.doAnimate){
        //     bars.transition()
        //         .duration(this.animationDuration)
        //         .attr("y", (d) => { return d.y; })
        //         .attr("height", (d) => { return d.height; });
        // }
        // else {
        //     bars.attr("y", (d) => { return d.y; })
        //         .attr("height", (d) => { return d.height; });
        // }

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

        // bars.append("title")
        //     .text(function (d) {
        //         return viewModel.keyMap(d.data);
        //     });

        return this;
    }
}