/**
 * Created by mm28969 on 11/7/16.
 */

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

import {Dispatcher} from "../mmviz-dispatch/index";
import {LayoutScale} from "../mmviz-layout/index";

import {Component} from "./component";

export class LineComponentSvg extends Component {

    strokeWidth;

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

        this.strokeWidth = 2;
    }

    updateView(parent, viewModel, layoutScale: LayoutScale): LineComponentSvg {

        let dModel,
            lineGenerator = d3.line().x(function(d) { return d.x; }).y(function(d) { return d.y; }),
            lineGroup = parent.select("g" + this.selector),
            lines;

        // lineGenerator.curve(d3.curveCatmullRom.alpha(0.5));

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

        for (dModel of viewModel.dataArray) {

            lines = lineGroup.append("path")
                .attr("d", lineGenerator(dModel.dataArray))
                .attr("class", "line " + dModel.categoryAttr)
                .attr("stroke", dModel.color.value)
                .attr("stroke-width", dModel.lineWidth)
                .attr("fill", "none");

            this.addContinuousBehavior("mouseover", lines, dModel);
            this.addContinuousBehavior("mouseout", lines, dModel);

        }

        return this;
    }
}