import {
  Component,
  Input,
  EventEmitter,
  Output,
  OnChanges,
  OnInit,
  OnDestroy
} from '@angular/core';
import { FilterModel } from './filter.model';
import { Subscription } from 'rxjs';
import { ConfigService } from '@arrow/bom/config';
import { BomMessage, MessageBusService, Utils } from '@arrow/bom/core';

@Component({
  selector: 'bom-filter-item',
  templateUrl: 'filter-item.component.html',
  styleUrls: ['filter-item.component.scss']
})
export class FilterItemComponent implements OnChanges, OnInit, OnDestroy {
  @Input() name: string;
  @Input() displayName: string;
  @Input() filtersData: any;
  @Input() hasSelection: boolean;
  @Input() isSearching: boolean;
  @Output() filterChange: EventEmitter<any> = new EventEmitter();
  filterList: Array<FilterModel> = [];
  title: string;
  data: Array<any>;
  filterLoading: boolean = true;
  subscriptions: Array<Subscription> = [];
  public selected: boolean;
  target;
  searchableList: Array<any> = ['display', 'name'];
  selectedOptions: Array<any> = [];
  stringTyped: string;

  constructor(
    private _messageBus: MessageBusService,
    private config: ConfigService,
    private utils: Utils
  ) {}

  ngOnInit() {
    this.target = this.config.getTarget();
    this.title = this.displayName;
    this.subscriptions.push(
      this._messageBus
        .from('ch:filters')
        .subscribe(
          (message: BomMessage) => (this.filterLoading = message.payload)
        )
    );
  }

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

  ngOnChanges(changes: any) {
    if (changes.filtersData && this.filtersData) {
      this.data = this.filtersData[this.name];
      this.filterList = this.filterListFromData();
    }
  }

  /**
   * Updates filter list with new filter items, setting selected from the old list
   * @return  Updated array of filters.
   */
  filterListFromData(): Array<FilterModel> {
    return this.data.map((item: any) => {
      item.friendlyName = this.utils.translateByKeyWithFallback(item.nameId, item.friendlyName);
      
      const existingItem = this.filterList.find(
        (filter: any) => filter.name === item.name
      );

      item = new FilterModel(item);
      if (existingItem) {
        item.selected = existingItem.selected;
      }
      return item;
    });
  }

  /**
   * updateFilter is triggered when a user selects/deselects a filter. filterChange will be
   * emitted and handled by the parent FiltersComponent.
   * @param filter  name of filter that has been select/deselect.
   */
  updateFilterState(name: string, filterName: string): void {
    const selectedFilters = this.filterList.find(
      filter => filter.name === filterName
    );
    selectedFilters.selected = !selectedFilters.selected;
    this.filterChange.emit({
      type: name,
      selection: filterName
    });
  }

  getTooltipDisplay(filter: any, hasSelection: boolean): string {
    return hasSelection
      ? `${filter.display} (${filter.relevant}/${filter.total})`
      : `${filter.display} (${filter.relevant})`;
  }

  clickDeselectItems() {
    for (let i = 0; i < this.selectedOptions.length; i++) {
      this.updateFilterState(this.name, this.selectedOptions[i]);
    }

    this.selectedOptions = [];
  }

  filterSearch(stringTyped: string) {
    this.stringTyped = stringTyped;
  }
}