import {Component, OnInit, Input} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Router} from '@angular/router';
import {ChartWizard} from './chart-wizard.service';
import {RangeAxisListModel} from './chart-wizard-model/range-axis-list-model';
import {error} from 'util';
import {forEach} from '@angular/router/src/utils/collection';
import {MatDialog, MatDialogConfig} from '@angular/material';

@Component({
    selector: 'app-chart-wizard',
    templateUrl: './chart-wizard.component.html',
    styleUrls: ['./chart-wizard.component.css']
})
export class ChartWizardComponent implements OnInit {


    @Input() reportId: string;

    chartJson: any;
    showSpinner: boolean;
    isFirstBar: boolean;
    isFirstTimeSeries: boolean;
    lineTypes = [
        {index: 0, value: 'default', title: 'Default'},
        {index: 1, value: 'dotted_lines', title: 'Dotted Lines'},
        {index: 2, value: 'dashed_lines', title: 'Dashed Lines'}
    ];
    rangeColors = [
        {index: 0, value: '#1f77b4', title: 'Dodger Blue'},
        {index: 1, value: '#ff7f0e', title: 'Vivid orange'},
        {index: 2, value: '#2ca02c', title: 'Forest Green'},
        {index: 3, value: '#8c864b', title: 'Greenish Red'},
        {index: 4, value: '#9467bd', title: 'Desaturated violet'},
        {index: 5, value: '#8c564b', title: 'Dark moderate red'},
        {index: 6, value: '#e377c2', title: 'Soft pink'},
        {index: 7, value: '#7f7f7f', title: 'Dark gray'},
        {index: 8, value: '#bcbd22', title: 'Strong yellow'},
        {index: 9, value: '#17becf', title: 'Strong cyan'},
        {index: 10, value: '#dc143c', title: 'Vivid red'},
        {index: 11, value: '#800080', title: 'Dark magenta'},
        {index: 12, value: '#0000FF', title: 'Blue'},
        {index: 13, value: '#008000', title: 'Dark lime green'},
        {index: 14, value: '#D2691E', title: 'Reddish Orange'},
        {index: 15, value: '#FF0000', title: 'Red'},
        {index: 16, value: '#000000', title: 'Black'},
        {index: 17, value: '#DB7093', title: 'Pink'},
        {index: 18, value: '#FF00FF', title: 'Pure Magenta'},
        {index: 19, value: '#7B68EE', title: 'Soft blue'},
        {index: 20, value: '#1f77b6', title: 'Strong blue'},
        {index: 21, value: '#9edae5', title: 'Very soft cyan'},
        {index: 22, value: '#393b79', title: 'Dark Blue'},
        {index: 23, value: '#5254a3', title: 'Dark moderate Blue'},
        {index: 24, value: '#6b6ecf', title: 'Slightly desaturated blue'},
        {index: 25, value: '#9c9ede', title: 'Very soft blue'},
        {index: 26, value: '#637939', title: 'Dark Green'},
        {index: 27, value: '#8ca252', title: 'Dark moderate green'},
        {index: 28, value: '#b5cf6b', title: 'Slightly desaturated green'},
        {index: 29, value: '#cedb9c', title: 'Desaturated Green'},

        /* Old Colors  */
        {index: 30, value: '#00FFFF', title: 'Aqua'},
        {index: 31, value: '#000000', title: 'Black'},
        {index: 32, value: '#0000FF', title: 'Blue'},
        {index: 33, value: '#FF00FF', title: 'Fuchsia'},
        {index: 34, value: '#808080', title: 'Gray'},
        {index: 35, value: '#008000', title: 'Green'},
        {index: 36, value: '#00FF00', title: 'Lime'},
        {index: 37, value: '#800000', title: 'Maroon'},
        {index: 38, value: '#000080', title: 'Navy'},
        {index: 39, value: '#808000', title: 'Olive'},
        {index: 40, value: '#FF9900', title: 'Orange'},
        {index: 41, value: '#800080', title: 'Purple'},
        {index: 42, value: '#FF0000', title: 'Red'},
        {index: 43, value: '#C0C0C0', title: 'Silver'},
        {index: 44, value: '#008080', title: 'Teal'},
        {index: 45, value: '#FFFFFF', title: 'White'},
        {index: 46, value: '#FFFF00', title: 'Yellow'}
    ];
    displayedColumns: string[] = ['Range Axis', 'Y Axis', 'Chart Title', 'Color', 'Line Type'];
    rangeAxisRemoveList: RangeAxisListModel[];
    hideChart = false;
    displayOptions: {}[];

    constructor(private _http: HttpClient, private _router: Router, private chartService: ChartWizard,  private dialog: MatDialog) {
    }

    ngOnInit() {
        this.showSpinner = true;
        this.isFirstBar = false;
        this.isFirstTimeSeries = false;
        this.chartService.getReportTypeData(this.reportId).subscribe(
            (respone) => {
                this.displayOptions = respone['displayOptions'];
                for (let dpOption = 0 ; dpOption < this.displayOptions.length ; dpOption++) {
                    if (this.displayOptions[dpOption]['name'] === 'HideChart') {
                        this.hideChart = this.displayOptions[dpOption]['selected'];
                    }
                }
            });
        if (!this.hideChart) {
            this.chartService.getChartData(this.reportId).subscribe(
                (response) => {
                    this.chartJson = response;
                    // @ts-ignore
                    this.rangeAxisRemoveList = response.rangeAxisRemoveList;
                    this.showSpinner = false;
                });
        }
    }

    saveChartData(value: String) {
        this.showSpinner = true;
        this.chartJson.chartTypeJSON = {
            index: 0,
            value: this.chartJson.chartType,
            title: ''
        };
        this.chartJson.categoryAxisJSON = this.chartJson.categoryAxisJSON || {};
        if (this.chartJson.categoryAxis) {
            this.chartJson.categoryAxisJSON = {
                index: 0,
                value: this.chartJson.categoryAxis,
                title: this.chartJson.categoryAxis
            };
        } 
		else {
            this.chartJson.categoryAxisJSON = {};
        }
        this.rangeAxisRemoveList = this.rangeAxisRemoveList || [];
        this.chartJson.rangeAxisRemoveList = this.rangeAxisRemoveList;
        for (const removeList of this.rangeAxisRemoveList) {
            this.chartJson.rangeAxisList.push(removeList);
        }

          this.chartService.saveChartData(this.chartJson, value).subscribe(
              (response) => {
                  this.ngOnInit();
              });
        this.showSpinner = false;
    }

    addRangeAxisRow() {
        this.chartJson.rangeAxisList = this.chartJson.rangeAxisList || {};
        this.chartJson.rangeAxisList.push(new RangeAxisListModel());
    }

    removeRangeAxisRow(d: any) {
        this.chartJson.rangeAxisList = this.chartJson.rangeAxisList.filter(item => item !== d);
        this.rangeAxisRemoveList = this.rangeAxisRemoveList || [];
        this.rangeAxisRemoveList.push(d);
        this.chartJson.rangeAxisRemoveList = this.rangeAxisRemoveList;
    }

    setBarChartOptions() {
        this.chartJson.barChartOptions = this.chartJson.barChartOptions || {
            verticalOrientation: null,
            stackedChart: null,
            displayBarControls: null,
            xAxisDateType: null,
            minimizeXAxisTickers: null,
            timeAxis: null,
            yAxisLogScale: null
        };
    }

    setTimeSeriesChartOptions() {
          this.chartJson.timeSeriesChartOptions = this.chartJson.timeSeriesChartOptions || {
              lineChartRenderer: null,
              showXAxisLabel: null,
              addXAxisTicker: null,
              nonTimeAxis: null,
              multiSeries: null
          };
    }

    setStackedCoulmnChartOptions() {
        console.log("Seeting up Stacked Column Charts");
        this.chartJson.stackedCoulmnChartOptions = this.chartJson.stackedCoulmnChartOptions || {
            lineChartRenderer: null,
            showXAxisLabel: null,
            addXAxisTicker: null,
            nonTimeAxis: null,
            multiSeries: null
        };
        console.log("StackedCoulmnChart chartJson:: ",this.chartJson);
    }


}