import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { OptionModel } from '../option.model';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { SearchableOptionsPage } from '../searchable-options.page';

@Component({
  selector: 'searchable-select',
  templateUrl: './searchable-select.component.html',
  styleUrls: ['./searchable-select.component.scss']
})
export class SearchableSelectComponent implements OnInit {
  @Input() default: string;
  @Input() title: string;
  @Input() progress = false;
  @Input() placeHolder: string;
  @Output() selected = new EventEmitter();
  @Output() canceled = new EventEmitter();
  @Input() options: OptionModel[] = [];

  public selectedOption: OptionModel;
  public finalSelection: any;
  public searchField: string;
  public showList = false;
  public direction: string;
  private isOpened = false;
  constructor(
    public cs: CommonService,
    public ts: TranslatorService,
    public modalController: ModalController,
    public sharedData: SharedDataService) { }

  ngOnInit() {
    this.direction = TranslatorService.getCurrentDirection();
    this.setDefault(this.default);
  }

  public searchFieldChanged() {
    // this.selectedOption = null;
  }

  public matches(option: OptionModel): boolean {
    if (this.searchField) {
      if (option.label) {
        return option.label.toLowerCase().indexOf(this.searchField.toLowerCase()) >= 0;
      } else {
        return false;
      }
    } else {
      return true;
    }
  }

  public noMatch(): boolean {
    for (const option of this.options) {
      if (this.matches(option)) {
        return false;
      }
    }
    return true;
  }

  public optionSelected(option) {
    this.selectedOption = option;
  }
  public selectionChanged(event) {
    // console.log (event);
  }

  public cancelSelection() {
    this.showList = false;
  }
  public submitSelection() {
    this.finalSelection = this.selectedOption;
    this.selected.emit(this.finalSelection);
    this.showList = false;
  }


  public showOptions() {
    if (this.cs.hasData(this.options)) {
      if (this.progress) {
        this.cs.startLoading();
      }
      this.closePage();
      this.showOptionsModal();
    } else {
      this.cs.presentAlert(this.ts.trPK('general', 'empty'));
    }
  }

  private closePage() {
    this.modalController.getTop().then( ( top: HTMLIonModalElement)=> {
      if ( top) {
        top.dismiss();
      }
    });
  }

  async showOptionsModal() {
    this.sharedData.setSharedData(this.options, OptionModel.SHARED_DATA);
    // Create a modal using MyModalComponent with some initial data
    const modal = await this.modalController.create({
      component: SearchableOptionsPage,
      componentProps: {}
    });
    modal.cssClass = 'modal-list';
    await modal.present();
    const { data } = await modal.onDidDismiss();
    if (data && data.selection) {
      this.selectedOption = data.selection;
      if (this.selectedOption) {
        this.selected.emit(this.selectedOption);
      } else {
        this.canceled.emit();
      }
    } else {
      this.canceled.emit();
    }
  }

  public setDefault(selection: string) {
    if (selection) {
      this.selectedOption = new OptionModel(selection, null);
    }
  }
}
