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 = [{
        x: [...Array(this.service.queryWindow.length).keys()],
        y: this.service.queryWindow,
        type: 'line'
      }];
    // if (this.service.distances.length !== 0) {
    //   const max = this.service.queryWindow.map((num, idx) => {
    //     return num + this.service.distances[idx];
    //   });
    //   const min = this.service.queryWindow.map((num, idx) => {
    //     return num - this.service.distances[idx];
    //   });
    //   data.push({
    //     x: [...Array(this.service.queryWindow.length).keys()],
    //     y: this.service.distances,
    //     type: 'bar'
    //   });
    // }
    this.plot =
      {
        data,
        layout: {
          hovermode: 'closest',
          autosize: true,
          margin: {
            l: 50,
            r: 30,
            t: 30,
            b: 5,
            pad: 4
          },
          height: 150,
          width: 350,
          titlefont: {
            size: 9
          },
          xaxis: {
            showgrid: false,
            zeroline: false,
            showticklabels: false,
          },
          yaxis: {
            zeroline: false,
            showticklabels: false,
          }
        }
      };
  }

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

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