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

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

import {Component} from "./component";

export class BoxComponentSvg extends Component {

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

    updateView(parent, viewModel): BoxComponentSvg {

        let boxGroup = parent.select("g" + this.selector);

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

        boxGroup.append("line")
            .attr("class", "box-top-whisker")
            .attr("x1", viewModel.topWhisker.x1)
            .attr("x2", viewModel.topWhisker.x2)
            .attr("stroke", "black")
            .attr("y1", viewModel.topWhisker.y1)
            .attr("y2", viewModel.topWhisker.y2);

        boxGroup.append("rect")
            .attr("class", "box")
            .attr("stroke", "black")
            .attr("fill", "white")
            .attr("x", viewModel.box.x)
            .attr("y", viewModel.box.y)
            .attr("width", viewModel.box.width)
            .attr("height", viewModel.box.height);

        boxGroup.append("line")
            .attr("class", "box-median")
            .attr("x1", viewModel.median.x1)
            .attr("x2", viewModel.median.x2)
            .attr("stroke", "black")
            .attr("y1", viewModel.median.y1)
            .attr("y2", viewModel.median.y2);

        boxGroup.append("line")
            .attr("class", "box-bottom-whisker")
            .attr("x1", viewModel.bottomWhisker.x1)
            .attr("x2", viewModel.bottomWhisker.x2)
            .attr("stroke", "black")
            .attr("y1", viewModel.bottomWhisker.y1)
            .attr("y2", viewModel.bottomWhisker.y2);

        boxGroup.append("g")
            .attr("class", "box-outliers")
            .selectAll("circle")
            .data(viewModel.outliers)
            .enter()
            .append("circle")
            .attr("cx", (d) => { return d.x; })
            .attr("cy", (d) => { return d.y; })
            .attr("r", (d) => { return d.r; })
            .attr("fill", (d) => { return d.color; });

        let points = boxGroup.selectAll("circle");
        this.addBehavior(points, "mouseover");
        this.addBehavior(points, "mouseout");
        this.addBehavior(points, "click");

        return this;
    }
}