import { Component } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { NavController, NavParams } from "ionic-angular";

import { ChatPage } from "../chat/chat";
import { LightboxPage } from "../lightbox/lightbox";
import { ProfileService } from "../../services/profiles";

@Component({
  selector: "page-profile",
  templateUrl: "profile.html",
  providers: [ProfileService],
})
export class ProfilePage {
  detailsOpen: boolean = false;
  profile: any;
  tabNavEl: any;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public profileService: ProfileService,
    private _sanitizer: DomSanitizer
  ) {
    this.profile = navParams.get("profile");
    this.tabNavEl = document.querySelector("#tab-nav .tabbar");
  }

  ionViewWillEnter() {
    this.tabNavEl.style.display = "none";
  }

  closeProfile(event) {
    this.navCtrl.pop();
  }

  closeProfileDetails(event) {
    if (this.detailsOpen) {
      this.detailsOpen = false;
      document.querySelector(".profile-toolbar").classList.remove("hidden");
      document.getElementById("detail-overlay").classList.remove("open");
    }
  }

  getBackground(pics) {
    return this._sanitizer.bypassSecurityTrustStyle(
      "url(/assets/" + pics.detail + ")"
    );
  }

  markFavorite(event, profile) {
    console.debug("favorite profile", { event: event, profile: profile });
  }

  nextProfile(event) {
    this.profile = this.profileService.getNextProfile(this.profile._id);
    this.navCtrl.setRoot(this.navCtrl.getActive().component);
  }

  openChat(event, profile) {
    this.navCtrl.push(ChatPage, {
      profile: profile,
    });
  }

  openProfileDetails(event) {
    if (!this.detailsOpen) {
      this.detailsOpen = true;
      document.querySelector(".profile-toolbar").classList.add("hidden");
      document.getElementById("detail-overlay").classList.add("open");
    }
  }

  previousProfile(event) {
    this.profile = this.profileService.getPreviousProfile(this.profile._id);
    this.navCtrl.setRoot(this.navCtrl.getActive().component);
  }

  showLightbox(event, image) {
    if (event.target.classList.contains("scroll-content")) {
      this.navCtrl.push(LightboxPage, {
        image: image,
      });
    }
  }

  toggleProfileDetails(event) {
    if (!this.detailsOpen) {
      this.openProfileDetails(event);
    } else {
      this.closeProfileDetails(event);
    }
  }
}