import { Component, OnInit } from '@angular/core';
import {CacheService} from '../cache.service';

@Component({
  selector: 'app-query-window',
  templateUrl: './query-window.component.html',
  styleUrls: ['./query-window.component.css']
})
export class QueryWindowComponent implements OnInit {

  public plot;

  constructor(private service: CacheService) { }

  ngOnInit(): void {
    this.service.onNewQuery.subscribe(() => {
      if (this.service.queryWindow) {
        this.initializePlot();
      }
    });
  }

  initializePlot(): void {
    const data = [];
    this.service.queryWindow.forEach((channel, index) => {
      data.push({
        x: [...Array(channel.length).keys()],
        y: channel,
        type: 'line',
        xaxis: 'x',
        yaxis: `y${index + 2}`,
      });
    });
    const subplots = [];
    this.service.queryWindow.forEach((channel, index) => {
      subplots.push([`xy${index + 2}`]);
    });
    const plot =
      {
        data: data,
        layout: {
          grid: {
            rows: this.service.queryWindow.length,
            columns: 1,
            subplots: subplots,
          },
          hovermode: 'closest',
          autosize: true,
          margin: {
            l: 50,
            r: 30,
            t: 30,
            b: 5,
            pad: 4
          },
          height: 300,
          width: 150,
          titlefont: {
            size: 9
          },
          showlegend: false,
          xaxis: {
            showgrid: false,
            zeroline: false,
            showticklabels: false,
          }
        }
      };
    this.service.queryWindow.forEach((channel, index) => {
      plot.layout[`yaxis${index + 2}`] = {
        zeroline: false,
        showticklabels: false,
      };
    });
    this.plot = plot;
    console.log(this.plot);
  }

  get isQuerySet(): boolean {
    return !!this.service.queryWindow;
  }

  public newQuery() {
    this.service.querySelectionMode = true;
  }
}