import {
  Component,
  OnInit,
  OnDestroy,
  EventEmitter,
  Output,
  ElementRef,
  ViewChild
} from '@angular/core';
import { Subscription } from 'rxjs';
import {
  AnalyticsEvent,
  AnalyticsService,
  BomMessage,
  MessageBusService
} from '@arrow/bom/core';

@Component({
  selector: 'bom-search',
  templateUrl: 'search.component.html',
  styleUrls: ['search.component.scss']
})
export class SearchComponent implements OnInit, OnDestroy {
  searching: boolean;
  filterLoading: boolean = true;
  bomLoading: boolean;
  subscriptions: Array<Subscription> = [];

  @ViewChild('partSearch') partSearchEl: ElementRef;
  @ViewChild('clearPartSearchBtn') clearPartSearchEl: ElementRef;

  @Output() searchChanged = new EventEmitter<{
    state: boolean;
    value: string;
  }>();

  constructor(
    private _messageBus: MessageBusService,
    private _analyticsService: AnalyticsService
  ) {}

  ngOnInit() {
    this.subscriptions.push(
      this._messageBus
        .from('ch:filters')
        .subscribe(
          (message: BomMessage) => (this.filterLoading = message.payload)
        )
    );

    this.subscriptions.push(
      this._messageBus
        .from('ch:loader')
        .subscribe((message: BomMessage) => (this.bomLoading = message.payload))
    );
  }

  ngOnDestroy() {
    this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe());
  }

  /**
   * Handles the API search call.
   * @param field  Users search term.
   */
  startBomPartSearch(field: any): void {
    const value = field.value;
    if (value.length > 1 && value.length <= 100) {
      // Trigger search filter
      this.searchChanged.emit({ state: true, value });
      this._analyticsService.googleTrackEvent(AnalyticsEvent.CLICK, {
        category: 'BOM',
        action: 'Search',
        label: value
      });
      setTimeout(() => {
        this.clearPartSearchEl?.nativeElement?.focus();
      }, 1000);
      this.filterLoading = true;
      this.searching = true;
      field.blur();
    }
  }

  /**
   * Clears search and clears search value from filters
   * @param field
   */
  clearSearch(field: any): void {
    // Trigger clear filters
    this.searchChanged.emit({ state: false, value: '' });
    // Reset search state and field
    setTimeout(() => {
      this.partSearchEl?.nativeElement?.focus();
    }, 1000);
    this.searching = false;
    this.filterLoading = true;
    field.value = '';
    field.blur();
  }
}