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;
  public layout;
  constructor(private state: StateService) { }

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

  async createPrototypes(): Promise<void> {
    const representatives: number[][] = [];
    this.state.lshData.candidates.forEach((grouphash) => {
      grouphash.forEach((candidates) => {
        representatives.push(candidates.slice(0, 20));
      });
    });
    const prototypes = await this.state.getTableInfo(representatives);
    const subplots = [];
    this.averages = prototypes.prototypes.map((prototype) => {
      const channelData = [];
      prototype.max.forEach((channel, index) => {
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
          type: 'scatter',
          fill: null,
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
        });
      });
      prototype.min.forEach((channel, index) => {
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
          type: 'scatter',
          fill: 'tonexty',
          mode: 'lines',
          line: {
            color: 'rgb(55, 128, 191)',
            width: 3
          }
        });
      });
      prototype.average.forEach((channel, index) => {
        channelData.push({
          x: [...Array(channel.length).keys()],
          y: channel,
          xaxis: 'x',
          yaxis: `y${index + 2}`,
          type: 'line',
          line: {
            color: 'red',
            width: 3
          }
        });
      });
      return channelData;
    });
    for (let index = 0; index < this.state.queryWindow.length; index++) {
      subplots.push([`xy${index + 2}`]);
    }
    this.layout = {
      grid: {
        rows: this.state.queryWindow.length,
        columns: 1,
        subplots: subplots,
      },
      showlegend: false,
      hovermode: 'closest',
      autosize: true,
      margin: {
        l: 10,
        r: 10,
        t: 30,
        pad: 4
      },
      xaxis: {
        showgrid: false,
        zeroline: false,
        showticklabels: false,
      },
      yaxis: {
        zeroline: false,
        showticklabels: false,
      },
      height: 300,
      width: screen.width * 0.1,
    };
    this.state.queryWindow.forEach((channel: number[], index: number) => {
      this.layout[`yaxis${index + 2}`] = {
        zeroline: false,
        showticklabels: false,
      };
    });
  }

  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("");
  }
}