import { Component, TemplateRef, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { PtFilterType } from '../../services/dynamic-forms.service';
import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
import { MatOption } from '@angular/material/core';
import { get, isNil, map } from 'lodash';

@Component({
  selector: 'prutech-dynamic-select',
  styleUrls: ['./dynamic-select.component.scss'],
  templateUrl: './dynamic-select.component.html',
})
export class PtDynamicSelectComponent {

  @ViewChild('allSelected') private allSelected: MatOption;
  @ViewChild('trigger', {read: MatAutocompleteTrigger, static: false}) trigger: MatAutocompleteTrigger;
  control: FormControl;
  label: string = '';
  placeholder: string = '';
  hint: string = '';
  name: string = '';
  required: boolean = undefined;
  appearance: string = '';
  lookupKey: string = '';
  // tslint:disable-next-line:no-any
  selections: Observable<any[]> | any[] = undefined;
  loading: Observable<boolean> = undefined;
  multiple: boolean = undefined;
  multiselectAll: boolean = undefined;
  hidden: boolean = false;
  disabled: boolean = false;
  readonly: boolean = false;
  filter: boolean = true;
  showLabel: boolean = false;
  showLabelAbove: boolean = false;
  displayWith: Function;
  filterType: PtFilterType;
  showClear: boolean;
  // tslint:disable-next-line:no-any
  errorMessageTemplate: TemplateRef<any> = undefined;
  // tslint:disable-next-line:no-any
  optionTemplate: TemplateRef<any> = undefined;
  get isAsyncSelections(): boolean {
    return this.selections instanceof Observable;
  }
  // tslint:disable-next-line:no-any
  get asyncSelections(): Observable<any> {
    // tslint:disable-next-line:no-any
    return this.selections as Observable<any>;
  }
  clear(control: FormControl): void {
    control.patchValue('', { emitEvent: true });
    setTimeout(() => {
      this.trigger.openPanel();
    });
  }
  // tslint:disable-next-line:no-any
  toggleAllSelection(): void {
    if (this.allSelected.selected) {
      this.control
        .patchValue([...map(this.selections as any[], (i) => i.value), 0]);
    } else {
      this.control.patchValue([]);
    }
  }
  compareFn = (op1: {lookupId: number, displayValue: string}, op2: {lookupId: number, displayValue: string}): boolean => {
    return op1 && op2 ? !isNil(this.lookupKey) ? get(op1, this.lookupKey) === get(op2, this.lookupKey) : op1.lookupId === op2.lookupId : op1 === op2;
  }
}