import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { StateService } from '../../../shared/services/state.service';
import { State } from '../../../shared/interfaces';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements AfterViewInit {

  @Input('reports_id') reports_id: string
  @ViewChild('state') stateRef: ElementRef

  constructor(
    private stateService: StateService
  ) { }


  ngAfterViewInit() {
    const stateConfig: any = {
      label: 'Density',
      backgroundColor: '#009688',
      borderColor: '#00796b'
    }

    const visconsityConfig: any = {
      label: 'Visconsity',
      backgroundColor: '#009688',
      borderColor: '#00796b'
    }


    this.stateService.fetch(this.reports_id).subscribe((data: State[]) => {
      stateConfig.data = data.map(item => item.density)
      visconsityConfig.data = data.map(item => item.visconsity)
      stateConfig.labels = data.map(item => item.state_time)
      const stateCtx = this.stateRef.nativeElement.getContext('2d')
      new Chart(stateCtx, createChartConfig(stateConfig, visconsityConfig))
    }
  )
  }
}

function createChartConfig({labels, data, label, borderColor, backgroundColor}, {}) {
  return {
    type: 'bar',
    options: {
      scales: {
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
            stacked: true
        }]
    }},
    data: {
      labels,
      datasets: [
        {
          label, data,
          backgroundColor: backgroundColor,
          borderColor: borderColor,
          borderWidth: 1
        },
        {
          label, data,
          backgroundColor: backgroundColor,
          borderColor: borderColor,
          borderWidth: 1
        }
      ],
    }
  }
}