import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams, PopoverController } from '@ionic/angular';
import { EventPerson } from 'src/app/models/eventperson.model';
import { SearchList } from 'src/app/models/search-document';
import { NewEventPage } from 'src/app/pages/agenda/new-event/new-event.page';
import { SearchPage } from 'src/app/pages/search/search.page';
import { AlertService } from 'src/app/services/alert.service';
import { ChatService } from 'src/app/services/chat.service';
import { FileLoaderService } from 'src/app/services/file/file-loader.service';
import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
import { environment } from 'src/environments/environment';
import { ThemeService } from 'src/app/services/theme.service'
import { HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-chat-options-features',
  templateUrl: './chat-options-features.page.html',
  styleUrls: ['./chat-options-features.page.scss'],
})
export class ChatOptionsFeaturesPage implements OnInit {

  documents:SearchList[] = [];
  members: any;
  attendees: EventPerson[] = [];

  capturedImage:any;
  capturedImageTitle:any;

  constructor(
    private popoverController: PopoverController,
    private modalController: ModalController,
    private alertService: AlertService,
    private navParams: NavParams,
    private fileLoaderService: FileLoaderService,
    private fileToBase64Service: FileToBase64Service,
    private chatService: ChatService,
    public ThemeService: ThemeService
  ) {

    this.members = this.navParams.get('members');
    this.attendees = this.members.map((val)=>{
      return {
        Name: val.name,
        EmailAddress: val.username+"@"+environment.domain,
        IsRequired: "true",
      }
    });
  }

  ngOnInit() {
    // this.chatService.refreshtoken();
  }

  notImplemented() {
    this.alertService.presentAlert('Funcionalidade em desenvolvimento');
  }

  close() {
    if( window.innerWidth < 701) {
      this.popoverController.dismiss();
    }
    else {
      this.modalController.dismiss();
    }
  }

  attachDocument(){

  }

  addDocument(){
    this.modalController.dismiss('add-document');
  }

  takePicture(){
    if( window.innerWidth < 701){
      this.popoverController.dismiss('take-picture');
    }
    else{
      this.modalController.dismiss('take-picture');
    }
  }

  addPicture(){
    this.modalController.dismiss('add-picture');
  }

  addDocGestaoDocumental(){
    this.modalController.dismiss('documentoGestaoDocumental');
  }

  laodPicture() {
    const input = this.fileLoaderService.createInput({
      accept: ['image/apng', 'image/jpeg', 'image/png']
    })

    input.onchange = async () => {
      const file = this.fileLoaderService.getFirstFile(input)


      let imageData;
      try {
        imageData = await this.fileToBase64Service.convert(file)
      } catch (error) {
        console.error('load picture chat',error)
      }
      this.capturedImage = imageData;
      this.capturedImageTitle = file.name;

      let body = {
        "message":
        {
          "rid": "J5WDHyrYWHQrybbno",
          "msg": "this.message",
          "attachments": [{
            "title": this.capturedImageTitle ,
            "text": "description",
            "title_link_download": false,
            "image_url": this.capturedImage,
          }]
        }
      }

      this.chatService.sendMessage(body).subscribe(res=> {
        // 
      });
      //
    };
  }

  sendMessage(){
    let body = {
      "message":
      {
        "rid": "J5WDHyrYWHQrybbno",
        "msg": "this.message",
        /* "attachments": [{
          "color": "#ff0000",
          "text": "Yay for gruggy!",
          "title": "Attachment Example",
          "title_link": "https://youtube.com",
          "title_link_download": false,
          "image_url": "https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png",
        }] */
      }
    }

    this.chatService.sendMessage(body).subscribe(res=> {


    });
  }

  /* getGroupContacts(room:any){
    this.showLoader = true;
    //If group is private call getGroupMembers
    if(this.room.t === 'p'){
      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
        
        this.members = res['members'];
        this.showLoader = false;
      });
    }
    //Otherwise call getChannelMembers for públic groups
    else{
      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
        
        this.members = res['members'];
        this.showLoader = false;
      });
    }
  } */

  async getDoc(){
    const modal = await this.modalController.create({
      component: SearchPage,
      cssClass: 'group-messages modal-desktop search-modal search-modal-to-desktop',
      componentProps: {
        type: 'AccoesPresidenciais & ArquivoDespachoElect',
        select: true,
        showSearchInput: true,
      }
    });
    await modal.present();
    modal.onDidDismiss().then((res)=>{
      if(res){
        const data = res.data;
        this.documents.push(data.selected);
      }
    });
  }

  async bookMeeting() {

    if( window.innerWidth <= 800){
      this.popoverController.dismiss();
      const modal = await this.modalController.create({
        component: NewEventPage,
        componentProps:{
          attendees: this.attendees,
        },
        cssClass: 'modal  modal-desktop',
        backdropDismiss: false
      });
      await modal.present();
      modal.onDidDismiss().then((data) => {
        if(data){

        }
      });
    }
    else{
      this.modalController.dismiss('meeting');
    }
  }

}