import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, LoadingController, AlertController } from '@ionic/angular';
import { DomSanitizer } from '@angular/platform-browser';
import { ViewController } from '@ionic/core';
import { Contacts, Contact, ContactField, ContactName } from '@ionic-native/contacts/ngx';
// import * as _ from 'underscore';
import { _ } from 'underscore';

@Component({
  selector: 'app-select-contact',
  templateUrl: './select-contact.page.html',
  styleUrls: ['./select-contact.page.scss'],
})
export class SelectContactPage implements OnInit {

  contactList: Contact[];
  contactFilteredList = [] as Contact[];
  searching = false;

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private contacts: Contacts,
    public loading: LoadingController,
    private sanitizer: DomSanitizer,
    private viewCtrl: ViewController,
    public alertCtrl: AlertController,
    public loadingController: LoadingController) { }

    ionViewDidLoad() {
    this.loadContacts();
  }

  async loadContacts() {
    const loader = await this.loadingController.create({
      message: 'Loading ...'
    });


    loader.present().then(() => {
      var options = new ContactFindOptions();
      options.multiple = true;
      options.desiredFields = ['id', 'displayName', 'phoneNumbers'];
      options.hasPhoneNumber = true;

      this.contacts.find(['id'], options).then((contacts) => {
        var sortedContacts = _.sortBy(contacts, 'displayName');
        this.contactList = this.contactFilteredList = sortedContacts;
        loader.dismiss();
      }).catch((error) => {
        console.error(error);
        loader.dismiss();
      });
    });
  }



  filterContacts(filter) {
    if (filter) {
      this.contactFilteredList = _.filter(this.contactList, function(contact: Contact) {
        let filterString =  filter.target.value.toLowerCase();
        return contact.displayName.toLowerCase().includes(filterString);
      });
    }
  }

  async displayAlert(contact: Contact) {
      const alert = await this.alertCtrl.create({
        header: 'Choose phone!',
        message: 'Choose the phone number you would like to use',
        buttons: [
          {
            text: 'CANCEL'
          },
          {
            text: 'CONTINUE',
            handler: data => {
              contact.phoneNumbers[0].value = data;
              this.viewCtrl.dismiss(contact);
            }
          }
        ]
      });
      contact.phoneNumbers.forEach((phone, index) => {
        // alert.addInput({type: 'radio', label: phone.value, value: phone.value, checked: index==0});
        inputs:({type: 'radio', label: phone.value, value: phone.value, checked: index==0});
      });
      await alert.present();
    }

    contactSelected(contact: Contact) {
    if (contact.phoneNumbers.length > 1) {
      this.displayAlert(contact);
    } else {
      this.viewCtrl.dismiss(contact);
    }
  }

  goToContactsPage() {
    this.navCtrl.push('contactos2');
  }

  ngOnInit() {
  }

}