import {
  Component, OnInit, AfterContentInit, Output, EventEmitter,
  Input, OnDestroy, OnChanges, SimpleChanges, ViewChild
} from '@angular/core';
import { Store } from '@ngrx/store';
import {
  DiscoverZone,
} from '@overflow/commons-typescript/model/discovery';

import * as DiscoverStore from '../../store/discover';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { ResultComponent } from './result/result.component';
import { ProbeSelectorComponent } from './probe-selector/probe-selector.component';
import { FilterComponent } from './filter/filter.component';

import { trigger, state, transition, style, animate } from '@angular/core';

@Component({
  selector: 'of-discovery-setting',
  templateUrl: './setting.component.html',
  animations: [
    trigger(
      'discoveryFilter', [
        state('summary', style({
          height: '70px',
          opacity: 0.9,
        })),
        state('full', style({
          height: '500px',
          opacity: 1,
        })),
        transition('* => *', animate('200ms ease-in')),
      ]),
    trigger(
      'result', [
        state('show', style({
          height: '300px',
          opacity: 1,
        })),
        state('hidden', style({
          height: '0px',
          opacity: 0,
        })),
        transition('* => *', animate('200ms ease-in')),
      ]
    )
  ]
})
export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {

  @Input() visible: boolean;
  @Input() probe: Probe;
  @Output() close = new EventEmitter();
  private requestStart = false;
  private started = false;
  private filterData: DiscoverZone;

  private selectedProbe: Probe;
  private height: number;

  @ViewChild('probeSelectorComponent') probeSelectorComponent: ProbeSelectorComponent;
  @ViewChild('filterComponent') filterComponent: FilterComponent;
  @ViewChild('resultComponent') resultComponent: ResultComponent;

  constructor(
    private discoverStore: Store<DiscoverStore.State>,
  ) {
    this.height = window.innerHeight * 0.9;
  }

  ngOnInit() {
    this.selectedProbe = this.probe;
  }

  ngAfterContentInit() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['visible']) {
      const change = changes['visible'];
      if (!change.previousValue && change.currentValue) {
        this.initAll();
      } else if (change.previousValue && !change.currentValue) {
        this.destroyAll();
      }
    }
  }

  ngOnDestroy() {
    this.selectedProbe = null;
    this.started = false;
    this.close.emit();
    this.requestStart = false;
  }

  initAll() {
    this.ngOnInit();
    if (this.probeSelectorComponent) {
      this.probeSelectorComponent.ngOnInit();
    }
    if (this.filterComponent) {
      this.filterComponent.ngOnInit();
    }
    if (this.resultComponent) {
      this.resultComponent.ngOnInit();
    }
  }

  destroyAll() {
    this.ngOnDestroy();
    if (this.probeSelectorComponent) {
      this.probeSelectorComponent.ngOnDestroy();
    }
    if (this.filterComponent) {
      this.filterComponent.ngOnDestroy();
    }
    if (this.resultComponent) {
      this.resultComponent.ngOnDestroy();
    }
  }

  onProbeSelect(probe: Probe) {
    this.selectedProbe = probe;
  }

  onDiscoveryStart(discoverZone: DiscoverZone) {
    this.filterData = discoverZone;
    this.discoverStore.dispatch(new DiscoverStore.DiscoverZone(
      { probeID: this.selectedProbe.probeKey, discoverZone: discoverZone }));

    setTimeout(() => {
      this.started = true;
      // this.requestStart = false;
    });
  }

  onCancel() {
    this.destroyAll();
  }

  onSave() {
    this.resultComponent.save();
  }

  onStop() {
    this.started = false;
  }

  onSummaryClick() {
    if (this.started) {
      return;
    }
    this.requestStart = false;
  }

}