import { AfterViewChecked, AfterViewInit, Component, Directive, ElementRef, Inject, Input, OnInit, ViewChild } from '@angular/core';

import { Observable, Subscription } from 'rxjs/Rx';

import { MatExpansionPanel, MatGridTile } from '@angular/material';

import { AbstractControl } from '@angular/forms';

import { animate, state, style, transition, trigger } from '@angular/animations';

import { Chart } from 'chart.js';

@Component({
    selector: 'knk-knok-item',
    styleUrls: ['./knokitem.component.scss'],
    templateUrl: './knokitem.component.html'
})
export class KnokItemComponent implements AfterViewInit, OnInit {
    @Input('isbutton') isbutton: boolean;
    @Input('isShowSideBet') isShowSideBet: boolean = false;
    @Input('isFollows') isFollows: boolean = false;
    @Input('isUser') isUser: boolean = false;

    observer: MutationObserver;

    startHeight: number;
    isCollapsed: boolean = true;
    chart: Chart;
    expandChart: boolean = false;

    @ViewChild('canvas') canvas;

    // public items: Observable<Array<{ label: string, value: string }>>;
    public _selectedItems: Array<{ label: string, value: string }> = [];
    public watchedItems: Array<{ label: string, value: string }>;
    private _items: Array<{ label: string, value: string }>;

    // private _lipsum: { label: string, value: string };

    constructor() {
      // this.elementRef = elementRef;
        // let LoremIpsum: { label: string, value: string };
        // this._lipsum = new LoremIpsum();
        this._items = [];
        // this.items = Observable.of(this._items);
        // this.items.subscribe(res => { console.log('Items changed'); this.watchedItems = res; });
    }

    createItems(): void {
      this._items.length = 0;
      // let max: number = 20;
      // let min: number = 10;
      // let numItems: number = Math.floor(Math.random() * (max - min + 1)) + min;
      // console.log("Adding " + numItems.toString() + " items");
      // max = 6;
      // min = 3;
      // let i: number;
      // for (i = 0; i < numItems; i++) {
      //   let numWords: number = Math.floor(Math.random() * (max - min + 1)) + min;
      //   // let label: string = this._lipsum.generate(numWords);
      //   this._items.push({ label: 'test', value: i.toString()});
      //   //  console.log(label);
      // }
    }

    ngOnInit(): void {
      this.createItems();
      // let timer = Observable.timer(20000,20000);
      // timer.subscribe(t=> {
        // this.createItems();
      // });}
      Chart.defaults.global.backgroundColor = 'red';
    }

    ngAfterViewInit(): void {
      // let htmlRef: AbstractControl = this.elementRef.nativeElement.querySelector(`#canvas`);
      if (this.canvas && this.canvas.nativeElement && this.isFollows && !this.isbutton) {
        setTimeout(() => {
      this.chart = new Chart(this.canvas.nativeElement, {
        type: 'line',
        data: {
          labels: ['lab11', 'lab2', 'lab3', 'lab4', 'lab5', 'lab6', 'lab7', 'lab8'],
          datasets: [
            {
              backgroundColor: 'rgba(255,99,132,0.2)',
              borderWidth: 2,
              hoverBackgroundColor: 'rgba(255,99,132,0.4)',
              hoverBorderColor: 'rgba(255,99,132,1)',
              data: [1, 100, 2, 150, 140, 70, 2, 200],
              borderColor: '#3cba9f',
              fill: false
            }
            // {
            //   data: [3, 4],
            //   borderColor: '#ffcc00',
            //   fill: false
            // }
          ]
        }
        // options: {
        //   // maintainAspectRatio: false,
        //   responsive: true,
        //   elements: {
        //     point: {
        //       radius: 0,
        //       hitRadius: 0,
        //       hoverRadius: 0
        //     },
        //     line: {
        //         tension: 0 // disables bezier curves
        //     }
        //   },
        // //   layout: {
        // //     padding: {
        // //         left: 0,
        // //         right: 0,
        // //         top: 0,
        // //         bottom: 0
        // //     }
        // //   },
        // //   // showLines: false,
        //   legend: {
        //     display: false
        //   },
        // //   title: {
        // //     display: true
        // //   },
        // //   tooltips: {
        // //     enabled: false
        // //   },
        // //   spanGaps: false,
        // //   scaleShowLabels : false,
        //   scales: {
        //     xAxes: [{
        //       display: true,
        //       gridLines : {
        //         display : false
        //       },
        //       ticks: {
        //         display: false
        //       }
        //     }],
        //     yAxes: [{
        //       display:  true,
        //       gridLines : {
        //         display : false
        //     },
        //     ticks: {
        //       display: false
        //     }
        //     }]
        //   }
        // }
      });
      // this.chart.canvas.parentNode.style.height = '24px';
    }, 10);
    }
    //   let config: MutationObserverInit = {
    //     attributes: true,
    //     childList: true,
    //     characterData: true
    // };

    // this.observer = new MutationObserver((mutations: MutationRecord[]) => {
    //     mutations.forEach((mutation: MutationRecord) => {
    //         // this.steps = this.wizard.steps.toArray();
    //         // this.canvas.nativeElement;
    //         if (this.canvas && this.canvas.nativeElement && this.isFollows && !this.isbutton) {
    //         }
    //     });
    // });

    // if (this.canvas && this.canvas.nativeElement && this.isFollows && !this.isbutton) {
    // this.steppers.forEach((el: ElementRef) => {
    //    this.observer.observe(this.canvas.nativeElement, config);
    // });
    // }
    }

    setStartHeight(element: {clientHeight: number}): void {
        this.startHeight = element.clientHeight;
    }

    expandPanel(element: {clientHeight: number}, event: Event): void {
        event.stopPropagation(); // Preventing event bubbling
        // if (this.triggerOption === 'collapse') {
        //    this.triggerOption = 'expand';
        // } else {
        //    this.triggerOption = 'collapse';
        // }
        this.setStartHeight(element);
        this.isCollapsed = !this.isCollapsed;
        // if (matExpansionPanel.expanded) {
        //    matExpansionPanel.close();
        // } else {
        //    matExpansionPanel.open();
        // }

        // if (!this._isExpansionIndicator(event.target)) {
          // matExpansionPanel.close(); // Here's the magic
        // }
      }

      expand(): void {
        this.expandChart = !this.expandChart;
      }
      resetChart(): void {
        this.expandChart = false;
      }

      private _isExpansionIndicator(target: EventTarget): boolean {
        const expansionIndicatorClass: string = 'mat-expansion-indicator';
        return true; // (target. classList && target.classList.contains(expansionIndicatorClass) );
      }
}
