import { Component, AfterViewInit, ViewChild, NgModule } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { BreakpointObserver } from '@angular/cdk/layout';
import * as Chartist from 'chartist';
import { ChartType, ChartEvent } from 'ng-chartist/dist/chartist.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from '../../app.component';
declare var require: any;

const data: any = require('./data.json');

export interface Chart {
  type: ChartType;
  data: Chartist.IChartistData;
  options?: any;
  responsiveOptions?: any;
  events?: ChartEvent;
}

export interface Element {
  pic: string;
  nome: string;
  linha: number;
  setor: string;
  gasto: number;
}

const ELEMENT_DATA: Element[] = [
  {
    pic: 'assets/images/users/1.jpg',
    nome: 'José X',
    linha: 93991227676,
    setor: 'GHI',
    gasto: 354.60
  },
  {
    pic: 'assets/images/users/2.jpg',
    nome: 'Sunil joshi',
    linha: 93991227676,
    setor: 'GHI',
    gasto: 35460
  },
  {
    pic: 'assets/images/users/3.jpg',
    nome: 'Vishal Bhatt',
    linha: 93991227676,
    setor: 'GHI',
    gasto: 35460
  },
  {
    pic: 'assets/images/users/4.jpg',
    nome: 'Beryllium Lon',
    linha: 93991227676,
    setor: 'GHI',
    gasto: 35460
  },
  {
    pic: 'assets/images/users/5.jpg',
    nome: 'Boron son',
    linha: 93991227676,
    setor: 'GHI',
    gasto: 35460
  },
  {
    pic: 'assets/images/users/6.jpg',
    nome: 'Carbon hryt',
    linha: 93991227676,
    setor: 'GHI',
    gasto: 35460
  },
  {
    pic: 'assets/images/users/7.jpg',
    nome: 'Nitro oxur',
    linha: 93991227676,
    setor: 'GHI',
    gasto: 35460
  }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard1.component.html',
  styleUrls: ['./dashboard1.component.scss']
})

export class Dashboard1Component implements AfterViewInit {

  clientes = [];
  cliente = "";

  addCliente(){
    this.clientes.push(this.cliente);
  }

  displayedColumns = ['pic', 'nome', 'linha', 'setor', 'gasto'];

  dataSource: MatTableDataSource<Element>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe(['(max-width: 600px)']).subscribe(result => {
      this.displayedColumns = result.matches ?
        ['pic', 'nome', 'linha', 'setor', 'gasto'] :
        ['pic', 'nome', 'linha', 'setor', 'gasto'];
    });

    // Assign the data to the data source for the table to render
    this.dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
  }

  //Strings
  str_total_linhas = 'Linhas';
  str_total_linhas_ativas = 'Em uso';
  str_total_linhas_disp = 'Disponíveis';
  str_total_linhas_cancel = 'Aparelhos';
  //planos
  str_plano_base = 'Básico';
  str_plano_inter = 'Intermediário';
  str_plano_avan = 'Avançado';

  str_plano_base_qt = ' - 600MB';
  str_plano_inter_qt = ' - 5GB';
  str_plano_avan_qt = ' - 10GB';

  // Barchart
  barChart1: Chart = {
    type: 'Bar',
    data: data['Bar'],
    options: {
      seriesBarDistance: 15,
      high: 12,

      axisX: {
        showGrid: false,
        offset: 20
      },
      axisY: {
        showGrid: true,
        offset: 40
      }
    },

    responsiveOptions: [
      [
        'screen and (min-width: 640px)',
        {
          axisX: {
            labelInterpolationFnc: function (
              value: number,
              index: number
            ): string {
              return index % 1 === 0 ? `${value}` : null;
            }
          }
        }
      ]
    ]
  };

  // This is for the donute chart
  donuteChart1: Chart = {
    type: 'Pie',
    data: data['Pie'],
    options: {
      donut: true,
      showLabel: false,
      donutWidth: 30
    }
    // events: {
    //   draw(data: any): boolean {
    //     return data;
    //   }
    // }
  };

  ngAfterViewInit() {
    // Sparkline chart
    const sparklineLogin = function () {
      // spark count
      (<any>$('.spark-count')).sparkline(
        [4, 5, 0, 10, 9, 12, 4, 9, 4, 5, 3, 10, 9, 12, 10, 9, 12, 4, 9],
        {
          type: 'bar',
          width: '100%',
          height: '70',
          barWidth: '2',
          resize: true,
          barSpacing: '6',
          barColor: 'rgba(255, 255, 255, 0.3)'
        }
      );
    };

    let sparkResize;
    (<any>$(window)).resize(function (e) {
      clearTimeout(sparkResize);
      sparkResize = setTimeout(sparklineLogin, 500);
    });

    sparklineLogin();

    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }


}