/**
 * Created by mm28969 on 10/25/16.
 */

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

import {Dispatcher} from "../mmviz-dispatch/index";
import {distance, convertSelectorToAttribute, getChartMouseLocation, xClosestDataPoint} from "../mmviz-common/index";

export class Component {

    doAnimate;
    animationDuration;

    constructor(public parentSelector: string, public selector: string) {

        this.doAnimate = false;
        this.animationDuration = 1000;
    }

    getClassName(): string {
        return convertSelectorToAttribute(this.selector);
    }

    getEventPayload(d, i: number){
        return {parentSelector: this.parentSelector, selector: this.selector, d: d, i: i, event: d3.event};
    }

    protected addBehavior(selection, behavior: string){

        let dispatcher: Dispatcher = Dispatcher.getInstance();
        /**
         * d: data from each visual element's dLayout obj, it is one element from viewModel.dataArray
         * i: index
         * getEventPayload adds extra data points such as parentSelector, selector, event into d
         */
        selection.on(behavior, (d, i: number) => {
            dispatcher.notify(behavior, this.getEventPayload(d, i));
        });
    }

    protected addContinuousBehavior(behavior, path, data){

        let dispatcher: Dispatcher = Dispatcher.getInstance();

        path.on(behavior, () => {

            let i, x, y,
                d, dClose,
                event = d3.event,
                p1 = getChartMouseLocation(this.parentSelector, event),
                payload;

            dClose = xClosestDataPoint(p1, data);

            d = dClose.d;
            x = d.x;
            y = d.y;

            payload = this.getEventPayload(d, dClose.i);
            payload.location = {x: x, y: y};

            dispatcher.notify(behavior, payload);
        });

        // path.on(behavior, () => {
        //     dispatcher.notify(behavior, {parentSelector: this.parentSelector, selector: this.selector, d: data, event: d3.event});
        // });
    }
}