import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy } from '@angular/core';
import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
import { AlertService } from 'src/app/services/alert.service';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
import { ContactsPage } from '../new-group/contacts/contacts.page';
import { NewGroupPage } from '../new-group/new-group.page';
import { GroupContactsPage } from './group-contacts/group-contacts.page';
import {Router} from '@angular/router'
import { EditGroupPage } from '../edit-group/edit-group.page';

@Component({
  selector: 'app-group-messages',
  templateUrl: './group-messages.page.html',
  styleUrls: ['./group-messages.page.scss'],
})
export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
  showLoader: boolean;
  isGroupCreated:boolean;
  loggedUser: any;
  message:any;
  leaveStatus:any;
  messages:any;

  room:any;
  roomName:any;
  members:any;
  contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];

  roomId: string;
  loggedUserChat:any;
  eventSelectedDate: Date = new Date();

  scrollingOnce:boolean = true;
  private scrollChangeCallback: () => void;
  currentPosition: any;
  startPosition: number;

  @ViewChild('scrollMe') private myScrollContainer: ElementRef;

  constructor(
    private menu: MenuController,
    private modalController: ModalController,
    private actionSheetController: ActionSheetController,
    public popoverController: PopoverController,
    private chatService: ChatService,
    private navParams: NavParams,
    private authService: AuthService,
    private alertService: AlertService,
    private route: Router
  ) {
    this.loggedUserChat = authService.ValidatedUserChat['data'];
    this.isGroupCreated = true;
    this.roomId = this.navParams.get('roomId');
  }

  ngOnInit() {
    console.log(this.roomId);
    this.loggedUser=this.loggedUserChat;
    this.getRoomInfo();
    this.scrollToBottom();
    this.serverLongPull();
    this.setStatus('online');
  }

  setStatus(status:string){
    let body = {
      message: '',
      status: status,
    }
    this.chatService.setUserStatus(body).subscribe(res => {
      console.log(res);
    })
  }

  ngAfterViewInit() {
    this.scrollChangeCallback = () => this.onContentScrolled(event);
    window.addEventListener('scroll', this.scrollChangeCallback, true);
  }

   onContentScrolled(e) {
    this.startPosition = e.srcElement.scrollTop;
    let scroll = e.srcElement.scrollTop;
    if (scroll > this.currentPosition) {
      //this.showButton = false;
      //alert('BOTTOM');
    } else {
      //this.showButton = true;
      //alert('UP');
      this.scrollingOnce = false;
    }
    this.currentPosition = scroll;
  }

  ngOnDestroy() {
    window.removeEventListener('scroll', this.scrollChangeCallback, true);
  }

  scrollToBottom(): void {
    try {
      if(this.scrollingOnce){
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
        //this.scrollingOnce = false;
      }
    } catch(err) { }
  }

  getRoomInfo(){
    this.showLoader = true;
    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
      this.room = room['room'];
      this.roomName = this.room.name.split('-').join(' ');
      this.getGroupContacts(this.room);
      this.loadGroupMessages(this.room);
      this.showLoader = false;
    });
  }

  /* load(){
    this.getGroupContacts();
    this.loadGroupMessages();
  } */

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

  doRefresh(ev:any){
    this.getRoomInfo();
    ev.target.complete();
  }

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

  loadGroupMessages(room:any){
    this.showLoader = true;
    //If group is private call getGroupMembers
    if(this.room.t === 'p'){
      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
        console.log(res);
        let msgOnly = res['messages'].filter(data => data.t != 'au');
        this.messages = msgOnly.reverse();
        this.showLoader = false;
      });
    }
    //Otherwise call getChannelMembers for públic groups
    /* else{
      this.chatService.getPublicGroupMessages(this.roomId).subscribe(res=>{
        console.log(res);
        this.messages = res['messages'].reverse();
      });
    } */
  }

  showDateDuration(start:any){
    let end;
    end = new Date();
    start = new Date(start);
    let customizedDate;

    const totalSeconds     = Math.floor((end - (start))/1000);;
    const totalMinutes     = Math.floor(totalSeconds/60);
    const totalHours       = Math.floor(totalMinutes/60);
    const totalDays        = Math.floor(totalHours/24);

    const hours   = totalHours - ( totalDays * 24 );
    const minutes = totalMinutes - ( totalDays * 24 * 60 ) - ( hours * 60 );
    const seconds = totalSeconds - ( totalDays * 24 * 60 * 60 ) - ( hours * 60 * 60 ) - ( minutes * 60 );

    if(totalDays == 0){
      if(start.getDate() == new Date().getDate()){
        let time = start.getHours() + ":" + this.addZero(start.getUTCMinutes());
        return time;
      }
      else{
        return 'Ontem';
      }
    }
    else{
      let date = start.getDate() + "/" + (start.getMonth()+1) + "/" + start.getFullYear();
      return date;
    }
  }

  addZero(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  }




  sendMessage(){
    let body = {
      "message": { "rid": this.roomId, "msg": this.message }
    }

    this.chatService.sendMessage(body).subscribe(res=> {
      this.getRoomInfo();
      this.scrollingOnce = true;

    },(error) => {

    });
    this.message = "";
  }

  async openOptions() {
    const modal = await this.popoverController.create({
      component: ChatPopoverPage,
      cssClass: 'chat-popover',
      componentProps: {
        roomId: this.roomId,
      },
    });
    await modal.present();
    modal.onDidDismiss().then(res=>{
      if(res.data == 'leave'){
        this.leaveStatus = this.loggedUser.me.name + ' saiu do grupo';
      }
      else if(res.data == 'cancel'){
        console.log('cancel');
      }
      else if(res.data == 'edit'){
        this.editGroup(this.roomId);
      }
    });
  }

  async openChatOptions(ev?: any) {
    console.log(this.members);

    const popover = await this.popoverController.create({
      component: ChatOptionsPopoverPage,
      cssClass: 'chat-options-popover',
      event: ev,
      componentProps: {
        room: this.room,
        members: this.members,
        eventSelectedDate: new Date(),
      },
      translucent: true
    });
    return await popover.present();
  }

  async addContacts(){
    console.log(this.members);

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

    await modal.present();

    modal.onDidDismiss().then(()=>{
      this.getRoomInfo();
    });
  }

  async editGroup(roomId){
    const modal = await this.modalController.create({
      component: EditGroupPage,
      cssClass: 'modal modal-desktop',
      componentProps: {
        roomId: roomId,
      },
    });
    await modal.present();
    modal.onDidDismiss().then((res)=>{
      console.log(res.data);
      this.modalController.dismiss(res.data);
    });
  }

  /* async actionSheet() {
    const actionSheet = await this.actionSheetController.create({
      cssClass: 'my-custom-class',
      buttons: [{
        text: 'Sair do grupo',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Alterar nome do grupo1',
        handler: () => {
          console.log('Alterar nome do grupo');
          this.openChangeGroupName()
        }
      }, {
        text: 'Apagar o grupo',
        handler: () => {
          console.log('Play clicked');
        }
      },
      ]
    });
    await actionSheet.present();
  }
 */

  async serverLongPull(){
    this.chatService.getPrivateGroupMessages(this.roomId).subscribe(async res => {

    if (res == 502) {
      // Connection timeout
      // happens when the connection was pending for too long
      // let's reconnect
      await this.serverLongPull();
    } else if (res != 200) {
      // Show Error
      //showMessage(response.statusText);
      //this.loadMessages()
      let msgOnly = res['messages'].filter(data => data.t != 'au');
      this.messages = msgOnly.reverse();
      console.log(this.messages);
      // Reconnect in one second
      if(this.route.url != "/home/chat"){
        console.log("Timer message stop")
      } else {
        //Check if modal is opened
        if(document.querySelector('.isGroupChatOpened')){
          await new Promise(resolve => setTimeout(resolve, 5000));
          await this.serverLongPull();
          console.log('Timer message running')
        }
      }

    } else {
      // Got message
      //let message = await response.text();
      //this.loadMessages()
      await this.serverLongPull();
    }
  });
  }

}
