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

// declare let d3;
// import {select as d3_select} from 'd3-select';
// import * as d3 from "d3";
import * as d3 from "d3";

import {TemplateComponent} from "./template";

export class DetailsComponent {
    /***
     * construct a hover over details window (determined by the "chart_details" string passed to TemplateComponent class)
     */

    offset;
    detailsTemplate: TemplateComponent;

    constructor(public selector: string) {

        this.offset = 0;
        this.detailsTemplate = new TemplateComponent("chart_details");
    }

    get view(){
        return d3.select(this.selector);
    }

    get content(){
        return this.view.select(".chart-details-content");
    }

    get dimension(){
        return this.view.node().getBoundingClientRect();
    }

    show(): DetailsComponent{

        this.view.style("visibility", "visible");

        return this;
    }

    hide(){

        this.view.style("visibility", null);

        return this;
    }

    set position(p){

        this.view.style("left", p.x + "px").style("top", p.y + "px");
    }

    createView(): DetailsComponent {

        if (this.view.empty()) {
            throw "Unable to find view.";
        }

        return this;
    }

    updateView(detailsObj): DetailsComponent{
        /**
         * detailsObj: an html string object, with structure like: {data: payload.d, hasColorIcon: false}, data is the
         * required attribute of this object. payload is an object from dispatcher's call back function. payload.d
         * contains a single dLayout object, which contains details, the text content for details template, also may contain
         * other attribute like color, size etc
         */
        this.detailsTemplate.updateView(this.view, detailsObj);

        return this;
    }

    updatePositionAbove(location, container): DetailsComponent{

        let dim = this.dimension,
            x = location.x - (dim.width * 0.5),
            y = location.y - (dim.height) - this.offset;

        this.position = {x: x, y: y};

        return this;
    }

    updatePositionOffCenter(location, container): DetailsComponent{

        let dim = this.dimension,
            x = location.x + this.offset,
            y = location.y + this.offset,
            isRight: boolean = true, isLow: boolean = true;

        if (x + dim.width > container.width) {
            x = location.x - this.offset - dim.width;
            isRight = false;
        }

        if (y + dim.height > container.height) {
            y = location.y - this.offset - dim.height;
            isLow = false;
        }

        if (isRight){

            if (isLow) {
                this.view.attr("class", "chart-details details-low-right");
            }
            else {
                this.view.attr("class", "chart-details details-high-right");
            }
        }
        else {

            if (isLow) {
                this.view.attr("class", "chart-details details-low-left");
            }
            else {
                this.view.attr("class", "chart-details details-high-left");
            }
        }

        this.position = {x: x, y: y};

        return this;
    }
}