import { Component, OnInit } from '@angular/core';
import {ChartOptions} from 'chart.js';
import {ApiService} from '../services/api.service';
import {animate, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'app-prediction',
  templateUrl: './prediction.component.html',
  styleUrls: ['./prediction.component.scss'],
  animations: [
    trigger(
      'inOut', [
        transition(':enter', [
          style({height: 0, opacity: 0}),
          animate('0.5s ease-out', style({height: '*', opacity: 1}))
        ]),
        transition(':leave', [
          style({height: '*', opacity: 1}),
          animate('0.5s ease-in', style({height: 0, opacity: 0}))
        ])
      ]
    )
  ]
})
export class PredictionComponent implements OnInit {

  readonly predictionUrl = 'https://definma-model-test.apps.de1.bosch-iot-cloud.com/predict';
  result = '';
  loading = false;
  spectrum: string[][] = [[]];
  chart = [{
    data: [],
    label: 'Spectrum',
    showLine: true,
    fill: false,
    pointRadius: 0,
    borderColor: '#00a8b0',
    borderWidth: 2
  }];
  readonly chartOptions: ChartOptions = {
    scales: {
      xAxes: [{ticks: {min: 400, max: 4000, stepSize: 400, reverse: true}}],
      yAxes: [{ticks: {min: 0, max: 1}}]
    },
    responsive: true,
    tooltips: {enabled: false},
    hover: {mode: null},
    maintainAspectRatio: true,
    plugins: {datalabels: {display: false}}
  };

  constructor(
    private api: ApiService
  ) { }

  ngOnInit(): void {
  }

  fileToArray(files) {
    const fileReader = new FileReader();
    fileReader.onload = () => {
      this.spectrum = fileReader.result.toString().split('\r\n').map(e => e.split(','));
      this.loading = true;
      this.api.post<{result: string}>(this.predictionUrl, this.spectrum, data => {
        this.result = data.result;
        this.loading = false;
      });
      this.chart[0].data = this.spectrum.map(e => ({x: parseFloat(e[0]), y: parseFloat(e[1])}));
      console.log(this.chart);
    };
    fileReader.readAsText(files[0]);
  }

}