/**
 * Created by mm28969 on 1/21/17.
 */

import {Component} from "./component";

export class MapPointComponentSvg extends Component {

    constructor(parentSelector: string, selector: string = ".map-points") {
        super(parentSelector, selector);
    }

    updateView(parent, viewModel): MapPointComponentSvg {

        let pointGroup = parent.select("g" + this.selector),
            points;

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

        pointGroup.selectAll("circle")
            .data(viewModel.dataArray, viewModel.keyMap)
            .enter()
            .append("circle")
            .attr("class", (d, i) => { return `point ${d.keyAttr} ${d.categoryAttr}` })
            .attr("cx", (d) => { return d.x; })
            .attr("cy", (d) => { return d.y; })
            .attr("r", (d) => { return d.radius.value; })
            .attr("fill", (d) => { return d.color.value; });

        pointGroup.selectAll("circle")
            .data(viewModel.dataArray, viewModel.keyMap)
            .attr("cx", (d) => { return d.x; })
            .attr("cy", (d) => { return d.y; })
            .attr("r", (d) => { return d.radius.value; })
        ;

        pointGroup.selectAll("circle")
            .data(viewModel.dataArray, viewModel.keyMap)
            .exit().remove();

        points = pointGroup.selectAll("circle");

        this.addBehavior(points, "mouseover");
        this.addBehavior(points, "mouseout");
        this.addBehavior(points, "click");

        return this;
    }

    getEventPayload(d, i: number){

        let payload: any = super.getEventPayload(d, i);

        payload.location = {x: d.x, y: d.y};

        return payload;
    }
}