/*
 * ============LICENSE_START==========================================
 * ONAP Portal SDK
 * ===================================================================
 * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
 * ===================================================================
 *
 * Unless otherwise specified, all software contained herein is licensed
 * under the Apache License, Version 2.0 (the "License");
 * you may not use this software except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *             http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Unless otherwise specified, all documentation contained herein is licensed
 * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
 * you may not use this documentation except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *             https://creativecommons.org/licenses/by/4.0/
 *
 * Unless required by applicable law or agreed to in writing, documentation
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * ============LICENSE_END============================================
 *
 * 
 */

import { Component, ElementRef, ChangeDetectionStrategy, ViewChild } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import * as  ChartConst from 'ng6-o2-chart';
import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
import { GoogleChartComponent } from 'angular-google-charts';
import {
  CompactType,
  DisplayGrid,
  GridsterComponentInterface,
  GridsterConfig,
  GridsterItem,
  GridsterItemComponentInterface,
  GridType
} from 'angular-gridster2';

@Component({
  selector: 'app-welcome-dashboard',
  templateUrl: './welcome-dashboard.component.html',
  styleUrls: ['./welcome-dashboard.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})



export class WelcomeDashboardComponent {
  /** Based on the screen size, switch from standard to one column per row */
 
  private bar_chart:GridsterItem;
  private pie_chart:GridsterItem;
  private favorite_reports:GridsterItem;
  private gauge_chart:GridsterItem;
  private map_chart:GridsterItem;
  private word_cloud:GridsterItem;
  private sticky_notes:GridsterItem;
  private candle_stick_chart:GridsterItem;


  @ViewChild('googlechart')
  googlechart: GoogleChartComponent;
  chart = {
    type: 'Gauge',
    data: [
      ['Central', 57],
      ['NorthEast', 72],
      ['West', 68],
      ['SouthEast', 75],
    ],
    options: {
      width: 400,
      height: 200,
      greenFrom: 0,
      greenTo: 75,
      redFrom: 90,
      redTo: 100,
      yellowFrom: 75,
      yellowTo: 90,
      minorTicks: 20,
      minCols:1,
      maxCols:1,
      minItemCols:1,
      maxItemRows:1
    }
  };

  gridOptions: GridsterConfig;
  dashboard: Array<GridsterItem>;
  remove: boolean;


  notes = [];
  recognition:any;
  
  cards = [
    { title: 'Card 1', cols: 2, rows: 1 },
    { title: 'Card 2', cols: 1, rows: 1 },
    { title: 'Card 3', cols: 1, rows: 2 },
    { title: 'Card 4', cols: 1, rows: 1 }
  ];

  ngOnInit(){  
    this.gridOptions = {
      minCols: 4,
      maxCols: 4,
      minRows: 10,
      maxRows: 10,
      maxItemCols: 50,
      minItemCols: 1,
      maxItemRows: 50,
      minItemRows: 1,
      maxItemArea: 2500,
      minItemArea: 1,
      defaultItemCols: 1,
      defaultItemRows: 1,
      setGridSize: true,
      fixedColWidth: 250,
      fixedRowHeight: 250,
      gridType: GridType.ScrollVertical,
      swap: true,
      dynamicColumns: true,
      displayGrid: DisplayGrid.None,
      draggable: {
        enabled: true
      },
      pushItems: true,
      resizable: {
        enabled: true
      }
    };

    this.dashboard = [
      {id:1,cols: 2, rows: 2, y: 0, x: 0, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
      {id:2,cols: 2, rows: 2, y: 0, x: 2, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
      {id:3,cols: 2, rows: 2, y: 1, x: 3, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
      {id:4,cols: 2, rows: 2, y: 1, x: 4, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
      {id:5,cols: 2, rows: 2, y: 2, x: 1, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
      {id:6,cols: 2, rows: 2, y: 2, x: 1, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
      {id:7,cols: 1, rows: 2, y: 1, x: 5, hasContent: true,dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'}
    ];
  }


  removeItem($event, item) {
    $event.preventDefault();
    $event.stopPropagation();
    this.dashboard.splice(this.dashboard.indexOf(item), 1);
  }

  // addItem() {
  //   this.dashboard.push({});
  // }
  
  getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  options: CloudOptions = {
    // if width is between 0 and 1 it will be set to the size of the upper element multiplied by the value 
    width: 20,
    height: 20,
    overflow: true
  };
       
  data: CloudData[] = [
     {"text":"PALM BEACH","weight":84, color : this.getRandomColor()}
    ,{"text":"ATLANTA","weight":75, color : this.getRandomColor()}
    ,{"text":"SCHAUMBURG","weight":70, color : this.getRandomColor()}
    ,{"text":"RUSSIA","weight":62, color : this.getRandomColor()}
    ,{"text":"REDMOND","weight":50, color : this.getRandomColor()}
    ,{"text":"FRISCO","weight":49, color : this.getRandomColor()}
    ,{"text":"FARMERS BRANCH","weight":44, color : this.getRandomColor()}
    ,{"text":"RAMON","weight":35, color : this.getRandomColor()}
    ,{"text":"ALPHARETTA","weight":32, color : this.getRandomColor()}
    ,{"text":"HANOVER","weight":29, color : this.getRandomColor()}
    ,{"text":"TUSTIN","weight":27, color : this.getRandomColor()}
    ,{"text":"SAN ANTONIO","weight":26, color : this.getRandomColor()}
  ];

  chartType: string;
  configData: any;
  barDataJson: any;
  geoMapDataJson: any;
  geoOrthographicDataJson: any;
  choroplethDataJson: any;
  scatterPlotDataJson: any;
  lineDataJson: any;
  histogramDataJson: any;
  pieDataJson: any;
  packLayoutDataJson: any;
  treeMapDataJson: any;
  stackBarDataJson: any;
  treeDataJson: any;
  forceDataJson: any;
  DataSetJson: string;

  lineTypeName: string;
  barTypeName: string;
  pieTypeName: string;
  scatterPlotTypeName: string;
  histogramTypeName: string;
  stackBarTypeName: string;
  geoMapTypeName: string;
  geoOrthographicTypeName: string;
  treeMapTypeName: string;
  packLayoutTypeName: string;
  choroplethTypeName: string;
  treeTypeName: string;
  forceTypeName: string;
  breakpointObserver: any;

  constructor(private el:ElementRef) {
    this.barTypeName       = ChartConst.LINE_CHART_TYPE_NAME;
    this.lineTypeName     	= ChartConst.LINE_CHART_TYPE_NAME;
    this.barTypeName     	= ChartConst.BAR_CHART_TYPE_NAME;
    this.pieTypeName     	= ChartConst.PIE_CHART_TYPE_NAME;
    this.scatterPlotTypeName 	= ChartConst.SCATTER_PLOT_CHART_TYPE_NAME;
    this.histogramTypeName     = ChartConst.HISTOGRAM_CHART_TYPE_NAME;
    this.stackBarTypeName     = ChartConst.STACK_BAR_CHART_TYPE_NAME;
    this.geoMapTypeName     = ChartConst.GEO_MAP_CHART_TYPE_NAME;
    this.geoOrthographicTypeName = ChartConst.GEO_ORTHOGRAPHIC_CHART_TYPE_NAME;
    this.treeMapTypeName     = ChartConst.TREE_MAP_CHART_TYPE_NAME;
    this.packLayoutTypeName 	= ChartConst.PACK_LAYOUT_CHART_TYPE_NAME;
    this.choroplethTypeName 	= ChartConst.CHOROPLETH_CHART_TYPE_NAME;
    this.treeTypeName     	= ChartConst.TREE_CHART_TYPE_NAME;
    this.forceTypeName     	= ChartConst.FORCE_CHART_TYPE_NAME;

    this.initilizeData();

    this.notes = JSON.parse(localStorage.getItem('notes')) || [{ id: 0,content:'' }];
    
    // Commented below code as it works only for chrome browser.
    // const {webkitSpeechRecognition} : IWindow = <IWindow>window;
    // this.recognition = new webkitSpeechRecognition();
    // this.recognition.onresult = (event)=> {
    //   console.log(this.el.nativeElement.querySelectorAll(".content")[0]);
    //   this.el.nativeElement.querySelectorAll(".content")[0].innerText = event.results[0][0].transcript
      
    // };
  }

  updateAllNotes() {
    console.log(document.querySelectorAll('app-note'));
    let notes = document.querySelectorAll('app-note');

    notes.forEach((note, index)=>{
         console.log(note.querySelector('.content').innerHTML)
         this.notes[note.id].content = note.querySelector('.content').innerHTML;
    });

    localStorage.setItem('notes', JSON.stringify(this.notes));

  }

  addNote () {
    this.notes.push({ id: this.notes.length + 1,content:'' });
    // sort the array
    this.notes= this.notes.sort((a,b)=>{ return b.id-a.id});
    localStorage.setItem('notes', JSON.stringify(this.notes));
  };
  
  saveNote(event){
    const id = event.srcElement.parentElement.parentElement.getAttribute('id');
    const content = event.target.innerText;
    event.target.innerText = content;
    const json = {
      'id':id,
      'content':content
    }
    this.updateNote(json);
    localStorage.setItem('notes', JSON.stringify(this.notes));
    console.log("********* updating note *********")
  }
  
  updateNote(newValue){
    this.notes.forEach((note, index)=>{
      if(note.id== newValue.id) {
        this.notes[index].content = newValue.content;
      }
    });
  }
  
  deleteNote(event){
     const id = event.srcElement.parentElement.parentElement.parentElement.getAttribute('id');
     this.notes.forEach((note, index)=>{
      if(note.id== id) {
        this.notes.splice(index,1);
        localStorage.setItem('notes', JSON.stringify(this.notes));
        console.log("********* deleting note *********")
        return;
      }
    });
  }

   record(event) {
    this.recognition.start();
    this.addNote();
  }

  private initilizeData() {
    // ConfigData = this.httpClient.get('assets/json/ConfigData.json');
    this.configData = {
      // tslint:disable-next-line:quotemark
      "className": {
        'axis': 'axis',
        'axisXBorder': 'axis_x',
        'axisXText': 'axis-x-text',
        'bar': 'bar',
        'barValue': 'bar-value',
        'line': 'line',
        'multiLinePrefix': 'line-',
        'grid': 'grid',
        'pie': 'pie',
        'pieInnerTitle': 'pie-inner-title',
        'pieInnerRadius': 'total',
        'histogram': 'histogram',
        'histogramBar': 'histogram-bar',
        'treemap': 'treemap',
        'treemapLabel': 'treemap-label',
        'packlayout': 'packlayout',
        'packlayoutLabel': 'packlayout-label',
      },
      'label': {
          'display': true,
      },
      'title': {
        'display': false,
        'name': 'Calls for Cities',
        'className': 'chart-title',
        'height': 30,
        'leftMargin': -20,
        'bottomMargin': 10
      },
      'maxValue': {
        'auto': true,
        'x': 100,
        'y': 100,
      },
      'legend': {
        'display': true,
        'position':'right',
        'totalWidth': 80,
        'initXPos': 5,
        'initYPos': 10,
        'rectWidth': 10,
        'rectHeight': 10,
        'xSpacing': 2,
        'ySpacing': 2
      },
      'color': {
        'auto': true, //
        'defaultColorNumber': 10,
        'opacity': 1.0,
        'userColors': [
          'blue',
          'red',
          'green',
          'yellow',
          'PaleGoldenrod',
          'Khaki',
          'DarkKhaki',
          'Gold',
          'Cornsilk',
          'BlanchedAlmond',
          'Bisque',
          'NavajoWhite',
          'Wheat',
          'BurlyWood',
          'Tan',
          'RosyBrown',
          'SandyBrown',
          'Goldenrod',
          'DarkGoldenrod',
          'Peru',
          'Chocolate'
        ],
        'focusColor': 'red',
      },
      'pie': {
        'innerRadius': {
          'percent': 20,
          'title': 'Total'
        },
        'value': {
          'display': true,
        },
        'percent':{
          'display': false,
        }
      },
      'line': {
        'legend': 'lineEnd',
        'interpolate' : 'linear',
      },
      'grid': {
        'x': {
          'display': true,
        },
        'y': {
          'display': true,
        },
      },
      'margin': {
        'top': 30,
        'left': 30,
        'right': 10,
        'bottom': 20,
        'between': 5
      },
      'axis': {
        'rotation': 0,
        'borderLineWidth': 1,
        'xLabel': {
          'leftMargin': 0,
          'bottomMargin': 5
        },
        'yLabel':{
          'leftMargin': 0,
          'bottomMargin': 0
        },
      },
      'animation': {
        'enable': true,
        'duration': 4000,
      },
    };


    this.barDataJson =
    {
      'series': [
        'Fixes',
        'Enhancements'
      ],
      'data': [
        {
          'x': 'Jan',
          'y': [44, 50],
        },
        {
          'x': 'Feb',
          'y': [36, 42],
        },
        {
          'x': 'Mar',
          'y': [56, 70],
        },
        {
          'x': 'Apr',
          'y': [60, 73],
        },
        {
          'x': 'May',
          'y': [47, 82],
        },
        {
          'x': 'Jun',
          'y': [53, 45],
        },
        {
          'x': 'Jul',
          'y': [54, 61],
        },
        {
          'x': 'Aug',
          'y': [53, 71],
        },
        {
          'x': 'Sep',
          'y': [55, 51],
        },
        {
          'x': 'Oct',
          'y': [18, 16],
        },
      ],
    };
    
    this.histogramDataJson =
    {
    	'range':[0,100],
    	'bins': [0,10,20,30,40,50,60,70,80,90,100],
    	'data':[
        11,95,60,44,60,50,35,20,10,22,
        19,70,65,42,22,33,40,53,52,89,
        90,55,50,55,65,72,45,35,15,45,
        50,95,60,26,60,50,35,20,10,33,
        56,70,65,42,22,33,40,53,52,89,
        90,55,50,55,28,72,45,35,15,28,
        50,95,60,44,60,37,35,20,10,22,
        56,70,65,22,22,37,40,53,52,89,
        90,55,50,55,65,72,45,35,15,45,
    	],
    };
    

    this.pieDataJson =
    {
    	'data':[
        {
          'name': 'Data source with Discrepancies',
          'value':31
        },
        {
          'name': 'Report not functioning',
          'value':24
        },
        {
          'name': 'Data missing from source',
          'value':10
        },
        {
          'name': 'Data source reloaded',
          'value':65
        },
        {
          'name': 'User error',
          'value':17
        },{
          'name': 'NA',
          'value':239
        },
    	],
    };
  }
}

export interface IWindow extends Window {
  webkitSpeechRecognition: any;
}