/**
 * Created by mm28969 on 11/8/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";
import {OrientationEnum} from "../mmviz-common";

export class AreaComponentSvg extends Component {

    orientationEnum: OrientationEnum;

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

        this.orientationEnum = OrientationEnum.VERTICAL;
    }

    updateView(parent, viewModel): AreaComponentSvg {

        let dModel,
            areaGenerator,
            areaGroup = parent.select("g" + this.selector),
            areas;

        if (OrientationEnum.VERTICAL === this.orientationEnum) {
            areaGenerator = d3.area()
                .x(function (d) {
                    return d.x;
                })
                .y1(function (d) {
                    return d.y;
                })
                .y0(function (d) {
                    return d.y0;
                })
            ;
        }
        else {
            areaGenerator = d3.area()
                .x1(function (d) {
                    return d.x;
                })
                .x0(function (d) {
                    return d.x0;
                })
                .y(function (d) {
                    return d.y;
                })
            ;
        }
        // areaGenerator.curve(d3.curveCatmullRom.alpha(0.1));

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

        for (dModel of viewModel.dataArray) {

            areas = areaGroup.append("path")
                .attr("class", "area-region " + dModel.categoryAttr)
                .attr("d", areaGenerator(dModel.dataArray))
                .attr("fill", dModel.color.value);

            this.addContinuousBehavior("mouseover", areas, dModel);
            this.addContinuousBehavior("mousemove", areas, dModel);
            this.addBehavior(areas, "mouseout");
            this.addBehavior(areas, "click");
        }

        return this;
    }
}