import { Component, ViewChild, ChangeDetectorRef, OnInit } from "@angular/core";
import { LoadingController, IonContent } from "@ionic/angular";
import { StorageService } from '../../services/storage.service';
import { PusherService } from "../../services/pusher.service";
import { TranslateService } from "@ngx-translate/core";

import { UserService } from "../../services/user.service";
import { CityService } from "../../services/city.service";
import { UtilsService } from "../../services/utils.service";

@Component({
  selector: "page-messages",
  templateUrl: "messages.html",
  styleUrls: ["./messages.scss"],
})
export class MessagesPage implements OnInit {
  listMessages: any = [];
  chatChannel: any;
  messageUser: any;
  @ViewChild("content") content: IonContent;
  constructor(
    private storage: StorageService,
    public loadingCtrl: LoadingController,
    public userProvider: UserService,
    private pusher: PusherService,
    public cityProvider: CityService,
    public cdRef: ChangeDetectorRef,
    private utilsService: UtilsService,
    public translateService: TranslateService
  ) {}

  ngOnInit() {
    this.pusher.connectChat();
  }

  ionViewWillLeave() {
    this.pusher.disconnectChat();
  }

  ionViewWillEnter() {
    this.getMessages();
    setTimeout(() => {
      this.chatChannel = this.pusher.getChatChannel();
      this.storage.get("infoUser").then((data) => {
        console.log("Storage data: ", data);
        this.chatChannel.bind("chat-user-" + data.id, (data) => {
          this.getMessages();
        });
      });
    }, 2);
  }

  getMessages() {
    this.storage.get("token").then(async (token) => {
      if (token) {
        (await this.userProvider.getMessages(token.access_token)).subscribe(
          (resp) => {
            if (resp["status"] == "success") {
              this.listMessages = resp["messages"];
            }
          },
          (error) => {
            console.log("error generateOrder", error);
          }
        );
      }
    });
  }

  callBottomScroll() {
    this.content.scrollToBottom(0);
  }

  sendMessage(formMessages) {
    if (formMessages.valid) {
      this.storage.get("token").then(async (token) => {
        if (token) {
          this.utilsService.presentLoading(this.translateService.instant("all.loading"));

          (await this.userProvider.newMessage(this.messageUser, token.access_token)).subscribe(
            (resp) => {
              if (resp["status"] == "success") {
                formMessages.reset();
                this.getMessages();
                this.utilsService.dismissLoading();
              }
            },
            (error) => {
              console.log("error generateOrder", error);
              this.utilsService.dismissLoading().catch();
            }
          );
        }
      });
    }
  }

  changeInputText(value) {
    if (value && value.length) {
      this.cdRef.detectChanges();
      this.messageUser = value.length > 499 ? value.substring(0, 500) : value;
    }
  }
}