import { Component, OnInit } from '@angular/core';
import {StateService} from '../state.service';

@Component({
  selector: 'app-table-overview',
  templateUrl: './table-overview.component.html',
  styleUrls: ['./table-overview.component.css']
})
export class TableOverviewComponent implements OnInit {
  public subplots;
  public averages;
  constructor(private state: StateService) { }

  ngOnInit(): void {
    this.state.onNewTable.subscribe(() => this.createHistograms());
    // this.state.onNewTableInfo.subscribe(() => this.createPrototypes());
  }

  createPrototypes(): void {
    this.averages = this.state.tableInfo.prototypes.map(prototype => {
      return {
        data: [
          {
            x: [...Array(prototype.average.length).keys()],
            y: prototype.average,
            type: 'line',
          },
          {
            x: [...Array(prototype.average.length).keys()],
            y: prototype.max,
            type: 'scatter',
            fill: null,
            mode: 'lines',
            line: {
              color: 'rgb(55, 128, 191)',
              width: 3
            }
          },
          {
            x: [...Array(prototype.average.length).keys()],
            y: prototype.min,
            type: 'scatter',
            fill: 'tonexty',
            mode: 'lines',
            line: {
              color: 'rgb(55, 128, 191)',
              width: 3
            }
          }
        ],
        layout: {
          showlegend: false,
          hovermode: 'closest',
          autosize: true,
          margin: {
            l: 10,
            r: 10,
            t: 10,
            b: 10,
            pad: 4
          },
          xaxis: {
            showticklabels: false
          },
          yaxis: {
            showticklabels: false
          },
          height: 100,
          width: screen.width * 0.1,
        }
      };
    });
  }

  async createHistograms() {
    console.log('creating table histograms');
    this.subplots = [];
    this.averages = [];
    const tables = this.state.table;
    console.log('start of table histograms');
    tables.forEach((table, index) => {
      console.log(index);
      this.subplots.push(
        {
          data: [{
            x: Object.keys(table),
            y: Object.values(table).map((values: number[]) => values.length), // / (this.service.rawValues.length - this.service.windowSize)),
            type: 'bar',
            opacity: 0.5,
            marker: {
              color: Object.keys(table).map((key) => {
                return this.getColor(Number(key) / Number(Object.keys(table)[Object.keys(table).length - 1]));
              })
            }
          }],
          layout: {
            hovermode: 'closest',
            autosize: true,
            margin: {
              l: 10,
              r: 10,
              t: 10,
              b: 10,
              pad: 4
            },
            xaxis: {
              showticklabels: false
            },
            yaxis: {
              showticklabels: false
            },
            height: 100,
            width: screen.width * 0.1,
          }
        }
      );
    });
    console.log('tables histogram created');
  }

  // async setQuery(data) {
  //   this.state.queryWindow = await this.state.getQueryWindow(data[0].y);
  //   await this.state.update();
  // }

  public get tables() {
    return this.state.table;
  }

  public get visible() {
    return !this.state.querySelectionMode;
  }

  getColor(value) {
    const hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
  }
}