import { analyzeAndValidateNgModules } from '@angular/compiler';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import { ModalController, NavParams, PickerController, PopoverController } from '@ionic/angular';
import { ChatService } from 'src/app/services/chat.service';
import { DataService } from 'src/app/services/data.service';
import { ProcessesService } from 'src/app/services/processes.service';
import { GroupDurationPage } from 'src/app/shared/popover/group-duration/group-duration.page';
import { GroupContactsPage } from '../group-messages/group-contacts/group-contacts.page';

@Component({
  selector: 'app-new-group',
  templateUrl: './new-group.page.html',
  styleUrls: ['./new-group.page.scss'],
})
export class NewGroupPage implements OnInit{
  isGroupCreated:boolean;
  showLoader: boolean;
  displayDuration: any;
  showDuration: boolean;
  thedate:any;
  _day:any;
  selectedDuration = ['','',''];
  countDownTime:any;
  //groupName:string;
  task:any;
  documents: any;

  @Input() groupName:string;
  @Output() addGroupMessage:EventEmitter<any> = new EventEmitter<any>();

  constructor(
    private pickerController: PickerController,
    private popoverController: PopoverController,
    private modalController: ModalController,
    private chatService: ChatService,
    private dataService:DataService,
    private processesService: ProcessesService,
    private router: Router,
  )
  {
    this.isGroupCreated = false;
    //this.groupName = this.navParams.get('name');
  }

  ngOnInit() {
    this.router.events.forEach((event) => {
      if (event instanceof NavigationStart && event.url.startsWith('/home/chat')) {
        if (this.dataService.get("newGroup")) {
          this.task =   this.dataService.get("task");
          this.groupName = this.task.Folio;
          this.documents = this.dataService.get("documents");
        }
      }
      else{
        this.dataService.set("newGroup", false);
      }
    });

    console.log(this.task);
  }

  /* ngOnDestroy(){
    alert('Destroy')
    this.dataService.set("newGroup", false);
    this.dataService.set("task", null);
    this.dataService.set("newGroupName", '');
  } */

  _ionChange(event){
    console.log(event);
    console.log(event.detail.checked);
    this.showDuration = event.detail.checked;

    if(event.detail.checked){
      this.thedate = new Date();
    }
    else{
      this.thedate = '';
    }
  }

  close(){
    //this.modalController.dismiss();
    console.log('close');
    this.addGroupMessage.emit();
  }

  createGroup(){
    let name = this.groupName.split(' ').join('-');
    //Take out all special characters in string
    name = name.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
    let body = { "name":name, }
    this.chatService.addGroup(body).subscribe(res=>{
      console.log('group created');
      console.log(res['group']);

      this.addGroupMessage.emit(res['group']._id);

      if(this.thedate){
        let countDownBody = {
          "roomId": res['group']._id,
          "customFields":{"countDownDate":this.thedate}
        }
        this.chatService.setGroupCustomFields(countDownBody).subscribe(res=>{
          console.log(res);
        });
      }

      if(this.documents.length > 0){
        //If there is documents add
        this.documents.forEach(async document => {

          let url = await this.processesService.GetDocumentUrl(document.DocId, document.ApplicationId).toPromise();
          let url_no_options: string = url.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");

          let body = {
            "message":
            {
              "rid": res['group']._id,
              "msg": "",
              "attachments": [{
                "title": document.Assunto,
                "description": document.DocTypeDesc,
                "title_link": url_no_options,
                "title_link_download": true,
                //"thumb_url": "assets/images/webtrix-logo.png",
                "message_link": url_no_options,
                "type": "webtrix"
              }],
              "file":{
                "name": document.Assunto,
                "type": "application/webtrix",
                "ApplicationId": document.ApplicationType,
                "DocId": document.Id,
                "Assunto": document.Assunto,
              }
            }
          }
          this.chatService.sendMessage(body).toPromise();
        });
      }



    });
  }

  async addContacts(){
    this.close();

    let name = this.groupName.split(' ').join('-');
    console.log(name);

    const modal = await this.modalController.create({
      component: GroupContactsPage,
      componentProps: {
        isCreated:this.isGroupCreated,
        name: name,
        duration:'',
      },
      cssClass: 'contacts',
      backdropDismiss: false
    });

    await modal.present();
    modal.onDidDismiss();
  }

  async setDuration(ev: any) {
    const popover = await this.popoverController.create({
      component: GroupDurationPage,
      cssClass: 'group-duration',
      event: ev,
      translucent: true
    });
    return await popover.present();
  }

  async showPicker(){
    const picker = await this.pickerController.create({
      cssClass: '',
      buttons: [
          {
            text: 'Cancelar', role: 'cancel', cssClass: 'btn-cancel'
          },
          {
            text: 'Ok',
            cssClass: 'btn-cancel',
            handler:(value:any)=>{
              console.log('button done pressed');
              console.log(value);

              let now = new Date();
              this.thedate = new Date(now.getFullYear(), now.getMonth(),  now.getDate() + value.days.value, now.getHours() + value.hours.value, now.getMinutes() + value.minutes.value, now.getSeconds(), now.getMilliseconds());
              /* let timer = setInterval(() =>{
                console.log('Show TIMER');
                let difference = this.thedate.getTime() - new Date().getTime();
                this._day = Math.floor(difference/(1000*60*60*24));
                let c_day = Math.floor(difference/(1000*60*60*24));
                let c_hours = Math.floor((difference % (1000*60*60*24)) / (1000*60*60));
                let c_minutes = Math.floor((difference % (1000*60*60)) / (1000*60));
                let c_seconds = Math.floor((difference % (1000*60)) / 1000);

                this.countDownTime = c_day + ":" + c_hours + ":" + c_minutes + ":" + c_seconds ;

                if(difference < 0){
                  clearInterval(timer);
                  this.countDownTime = "Expired";
                }

              }) */


              this.selectedDuration = [
                value.days.value,
                value.hours.value,
                value.minutes.value,
              ]
              console.log(this.selectedDuration);
              if(value.days.value != null && value.hours.value != null && value.minutes.value != null){
                if(value.days.value > 0){
                  if(value.days.value == 1){
                    if(value.hours.value == 1){
                      this.displayDuration = value.days.value  + " day " +
                      value.hours.value + " hora " +
                      value.minutes.value + " minutos";
                    }
                    else{
                      this.displayDuration = value.days.value  + " days " +
                      value.hours.value + " horas " +
                      value.minutes.value + " minutos";
                    }
                  }
                  else{
                    if(value.hours.value == 1){
                      this.displayDuration = value.days.value  + " days " +
                      value.hours.value + " hora " +
                      value.minutes.value + " minutos";
                    }
                    else{
                      this.displayDuration = value.days.value  + " days " +
                      value.hours.value + " horas " +
                      value.minutes.value + " minutos";
                    }
                  }
                }
                else{
                  if(value.hours.value == 1){
                    this.displayDuration = value.hours.value + " hora " +
                    value.minutes.value + " minutos";
                  }
                  else{
                    this.displayDuration = value.hours.value + " horas " +
                    value.minutes.value + " minutos";
                  }
                }
              }
            },
        },
      ],
      columns: [
        {
          name: 'days',
          prefix: 'Dias',
          options: [
            { text: '0', value: 0 },
            { text: '1', value: 1 },
            { text: '2', value: 2 },
            { text: '3', value: 3 },
            { text: '4', value: 4 },
            { text: '5', value: 5 },
            { text: '6', value: 6 },
          ]
        },
        {
          name: 'hours',
          prefix: 'Horas',
          options: [
            { text: '0', value: 0 },
            { text: '1', value: 1 },
            { text: '2', value: 2 },
            { text: '3', value: 3 },
            { text: '4', value: 4 },
            { text: '5', value: 5 },
            { text: '6', value: 6 },
            { text: '7', value: 7 },
            { text: '8', value: 8 },
          ]
        },
        {
          name: 'minutes',
          prefix: 'Minutos',
          selectedIndex: 3,
          options: [
            { text: '0', value: 0 },
            { text: '5', value: 5 },
            { text: '10', value: 10 },
            { text: '15', value: 15 },
            { text: '20', value: 20 },
            { text: '25', value: 25 },
            { text: '30', value: 30 },
            { text: '35', value: 35 },
            { text: '45', value: 45 },
            { text: '50', value: 50 },
            { text: '55', value: 55 },
          ]
        }
      ]
    });
    await picker.present();
    picker.onDidDismiss().then(async data =>{
      let day = await picker.getColumn('days');
      let hour = await picker.getColumn('hours');
      let minutes = await picker.getColumn('minutes');
    });

  }

}
