import { HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { GroupMessagesPage } from '../../group-messages/group-messages.page';
import { ThemeService } from 'src/app/services/theme.service'

@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.page.html',
  styleUrls: ['./contacts.page.scss'],
})
export class ContactsPage implements OnInit {
  showLoader: boolean;
  users = [];

  contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];

  headers: HttpHeaders;
  options:any;

  contacts = [
    {
      first: 'Ana',
      last: 'Manuel',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    },
    {
      first: 'Abdullah',
      last: 'Hill',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    },
    {
      first: 'Batur',
      last: 'Oymen',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    },
    {
      first: 'Bianca',
      last: 'Costa',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    },
    {
      first: 'Zaya',
      last: 'Mary',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    },
    {
      first: 'Tiago',
      last: 'Kayaya',
      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
    }
];

  constructor(
    private modalController: ModalController,
    public ThemeService: ThemeService
  ) 
  { 
    this.headers = new HttpHeaders();
    this.headers = this.headers.set('Access-Control-Allow-Origin' , '*');
    this.headers = this.headers.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
    this.headers = this.headers.set('Accept','application/json');
    this.headers = this.headers.set('content-type','application/json');
        
  }

  ngOnInit() {
    this.loadUsers();

  }

  loadUsers(){
    this.options = { 
      headers: this.headers,
    };
    /* this.http.get('https://randomuser.me/api/?results=100', this.options)
    .subscribe(res => {
      this.users = res['results'].sort((a,b) => {
        if(a.name.first < b.name.first){
          return -1;
        }
        if(a.name.first > b.name.first){
          return 1;
        }
        return 0;
      });
      
      
    }); */
    this.users = this.contacts.sort((a,b) => {
      if(a.first < b.first){
        return -1;
      }
      if(a.first > b.first){
        return 1;
      }
      return 0;
    });
  }

  separateLetter(record, recordIndex, records){
    /* if(recordIndex == 0){
      return record.name.first[0];
    }

    let first_prev = records[recordIndex - 1].name.first[0];
    let first_current = record.name.first[0];

    if(first_prev != first_current){
      return first_current;
    }
    return null; */
    if(recordIndex == 0){
      return record.first[0];
    }

    let first_prev = records[recordIndex - 1].first[0];
    let first_current = record.first[0];

    if(first_prev != first_current){
      return first_current;
    }
    return null;
  }

  doRefresh(event){

  }
  close(){
    this.modalController.dismiss();
  }
  onChange(event){

  }
  clicked(){
    
    
  }
  async groupMessages(){
    const modal = await this.modalController.create({
      component: GroupMessagesPage,
      componentProps: {}, 
      cssClass: 'contacts',
      backdropDismiss: false
    });

    await modal.present();

    modal.onDidDismiss();
  }

}