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

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

import {Component} from "./component";

export class PieComponentSvg extends Component {

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

    updateView(parent, viewModel): PieComponentSvg {

        let sliceGroup = parent.select("g" + this.selector),
            x = viewModel.center.x, y = viewModel.center.y,
            transform = `translate(${x},${y})`,
            slices;

        if (sliceGroup.empty()) {
            sliceGroup = parent.append("g").attr("class", super.getClassName());
        }

        let arc = d3.arc().outerRadius(viewModel.radius).innerRadius(viewModel.innerRadius);

        sliceGroup.selectAll(".arc")
            .data(viewModel.dataArray)
            .enter()
            .append("g")
            .attr("class", (d, i) => { return "arc " + d.categoryAttr; })
            .append("path");

        sliceGroup.selectAll(".arc")
            .data(viewModel.dataArray)
            .enter()
            .remove();

        slices = sliceGroup.selectAll(".arc")
            .data(viewModel.dataArray)
            .attr("transform", transform)
            .select("path")
            .attr("d", arc)
            .style("fill", function(d) { return d.color.value; });

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

        return this;
    }
}