/**
 * Created by michaelbessey on 10/23/16.
 */

// declare let mmviz_static;

import * as chartRenderer from "../mmviz-template/chart";
import * as chartDetailsRenderer from "../mmviz-template/chart_details";

import * as chartLegendColorRenderer from "../mmviz-template/chart_legend_color";
import * as chartLegendAreaRenderer from "../mmviz-template/chart_legend_area";

/**
 * construct different template based on template string
 */
export class TemplateComponent {
    private _renderer: any;

    constructor(template: string) {

        this.template = template;
    }

    set template(t){

        switch(t) {
            case "chart":
                this._renderer = chartRenderer;
                break;
            case "chart_details":
                this._renderer = chartDetailsRenderer;
                break;
            case "chart_legend_color":
                this._renderer = chartLegendColorRenderer;
                break;
            case "chart_legend_area":
                this._renderer = chartLegendAreaRenderer;
                break;
            default:
                throw "Invalid template name.";
        }
    }

    set renderer(r){
        this._renderer = r;
    }

    /**
     * parentId: string, id of html element obj
     * detailsObj: a js obj, with different structure for different Renderer
     * for chartDetailsRender, the detailsObj is 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
     */
    createView(parentId, detailsObj): TemplateComponent {
        // NOTE: different Renderer accept different structure of obj, luckily they are all JS object
        document.querySelector(parentId).innerHTML = this._renderer.renderTemplate(detailsObj);
        return this;
    }

    /**
     * parent: html element obj
     * detailsObj: a js obj, with different structure for different Renderer
     * for chartDetailsRender, the detailsObj is 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
     */
    updateView(parent, detailsObj): TemplateComponent {

        parent.node().innerHTML = this._renderer.renderTemplate(detailsObj);
        return this;
    }
}