import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Router, ActivatedRoute } from '@angular/router';
import { CommonService } from "../../shared/common.service";
import { EntryComponents } from './entry-components';

@Component({
    selector: 'chart-details-wrapper',
    styleUrls: ['./chart-details-wrapper.css'],
    template: `<div class="wrapper">
                <h2>{{chartType}}</h2>
                <div>
                  <chart-details [componentData]="componentData"></chart-details>
                  <chart-description></chart-description>
                </div>
                <chart-code></chart-code>
              </div>
              `

})
export class ChartDetailsWrapper implements OnInit {
    componentData = null;
    chartType: string;
    entryComponents: EntryComponents = new EntryComponents();

    constructor(private router: Router,
        private route: ActivatedRoute,
        private commonService: CommonService) {
    }

    ngOnInit() {
        this.route.params.subscribe((params) => {
            if (params['chartType']) {
                this.createChartComponent(params['chartType']);
                this.chartType = this.commonService.getChartTypeName(params['chartType']);
            }
        });
    }

    createChartComponent(chartType) {
        let component = this.entryComponents.getComponentForChartType(chartType);
        this.componentData = {
            component: component
        };
    }
}