import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { StorageService } from 'src/app/services/storage.service';
import { AuthConnstants } from 'src/app/config/auth-constants';
import { Token } from '../models/token.model';
import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
/* import { AgendaPage } from '../pages/agenda/agenda.page'
import { ExpedientePage } from '../pages/gabinete-digital/expediente/expediente.page'
import { EventListPage } from '../pages/gabinete-digital/event-list/event-list.page';
import { PublicationsPage } from '../pages/publications/publications.page'
import { ViewPublicationsPage } from '../pages/publications/view-publications/view-publications.page' */
import { ModalController, AlertController, AnimationController, Platform } from '@ionic/angular';
import { ViewEventPage } from '../pages/agenda/view-event/view-event.page';
import { ExpedienteDetailPage } from '../pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page';
import { PublicationDetailPage } from '../pages/publications/publication-detail/publication-detail.page';
import { ViewPublicationsPage } from '../pages/publications/view-publications/view-publications.page';
import { ApproveEventModalPage } from '../pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page';

@Injectable({
  providedIn: 'root'
})
export class NotificationsService {

  adding: "intervenient" | "CC" = "intervenient";
  folderId: string;

  constructor(
    private http: HttpClient,
    private fcm: FCM,
    private storageService: StorageService,
    private modalController: ModalController,
    public modalCtrl: AlertController,
    private animationController: AnimationController,
    private platform: Platform/* , 
    public agenda: AgendaPage,
    public expediante: ExpedientePage,
    public eventList: EventListPage,
    public publication: PublicationsPage,
    public viewPublication: ViewPublicationsPage */) { }

  getTokenByUserIdAndId(user, userID) {
    const geturl = environment.apiURL + 'notifications/user/' + userID;

    return this.http.get<Token[]>(`${geturl}`);
  }

  getAndpostToken(username) {
    if(this.platform.is('desktop')) {
      console.log('Notifications not supported')
    } else {
      
      const geturl = environment.apiURL + 'notifications/token';

    return this.fcm.getToken().then(token => {
      console.log('token: ', token)
      this.storageService.store(username, token);
      this.storageService.get(username).then(value => {
        console.log('STORAGE TOKEN', value)
        this.storageService.get(AuthConnstants.USER).then(res => {
          console.log('USERID', res);
          const headers = { 'Authorization': 'Basic cGF1bG8ucGludG9AZ2FiaW5ldGVkaWdpdGFsLmxvY2FsOnRhYnRlc3RlQDAwNg==' };
          const body = {
            UserId: res.UserId,
            TokenId: token,
            Status: 1,
            Service: 1
          };

          this.http.post<Token>(`${geturl}`, body, { headers }).subscribe(data => {
            console.log('TOKEN USER MIDLE', data);
          })
        });

      });
    });
    }
    
  }

  async onReceviNotification(viewEventDetail, viewExpedientDetail, openApproveModal, viewPublications, viewPublicationDetail) {
    this.fcm.onNotification().subscribe(data => {
      if (data.click_action) {
        console.log("Received in background: ", data);

        if (data.Service === "agenda") {
          viewEventDetail(data.IdObject)
        }
        else if (data.Service === "gabinete-digital" && data.Object === "expediente") {
          console.log('expediante 1')
          viewExpedientDetail(data.IdObject)
        }
        else if (data.Service === "gabinete-digital" && data.Object === "event-list") {
          openApproveModal(data.IdObject);
        }
        else if (data.Service === "accoes" && data.Object === "accao") {
          viewPublications(data.IdObject)
        }
        else if (data.Service === "accoes" && data.Object === "publicacao") {
          viewPublicationDetail(data.IdObject)
        }

      } /* else {
        console.log("Received in foreground: ", data);

        console.log(data.Service)
        console.log(data.Object)
        console.log(data.IdObject)
        this.openApproveModal(data.IdObject);
      
      }; */
    });
  }

  platformVerify() {
    
    if (this.platform.is('cordova')) {
    } else {
    }
  }

  async viewEventDetail(eventId: any) {

    const modal = await this.modalController.create({
      component: ViewEventPage,
      componentProps: {
        eventId: eventId,
        adding: this.adding
      },
      cssClass: 'modal  modal-desktop',
      backdropDismiss: false
    });
    await modal.present();
    modal.onDidDismiss().then((res) => {
      if (res) {
        //this.viewEventDetailDismiss(res);
      }
    });
  }

  async openApproveModal(eventSerialNumber) {
    let classs;
    if (window.innerWidth <= 1024) {
      classs = 'cal-modal  modal modal-desktop'
    } else {
      classs = 'gabinete-digital-mobile-modal-to-Desktop'
    }

    const modal = await this.modalController.create({
      component: ApproveEventModalPage,
      componentProps: {
        serialNumber: eventSerialNumber,
      },
      cssClass: 'event-list',
      backdropDismiss: false
    });

    await modal.present();

    modal.onDidDismiss();
  }

  async viewExpedientDetail(serialNumber: any) {
    let classs;
    if (window.innerWidth <= 800) {
      classs = 'modal'
    } else {
      classs = 'modal modal-desktop showAsideOptions'
    }
    console.log(serialNumber);
    console.log('expediante 2')
    const modal = await this.modalController.create({
      component: ExpedienteDetailPage,
      componentProps: {
        serialNumber: serialNumber,
        profile: "MDGPR",
      },
      cssClass: classs,
    });
    await modal.present();
    modal.onDidDismiss().then((res) => {
      if (res) {
        console.log(res);
      }
    });
  }

  async viewPublicationDetail(publicationId: string) {
    const modal = await this.modalController.create({
      component: PublicationDetailPage,
      componentProps: {
        publicationId: publicationId,
        folderId: this.folderId,
      },
      cssClass: 'publication-detail',
      backdropDismiss: false
    });
    await modal.present();
    modal.onDidDismiss().then(() => {

    });
  }


  async viewPublications(folderId) {

    const enterAnimation = (baseEl: any) => {
      const backdropAnimation = this.animationController.create()
        .addElement(baseEl.querySelector('ion-backdrop')!)
        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');

      const wrapperAnimation = this.animationController.create()
        .addElement(baseEl.querySelector('.modal-wrapper')!)
        .keyframes([
          { offset: 0, opacity: '0', transform: 'scale(0)' },
          { offset: 1, opacity: '0.99', transform: 'scale(1)' }
        ]);

      return this.animationController.create()
        .addElement(baseEl)
        .easing('ease-out')
        .duration(500)
        .addAnimation([backdropAnimation, wrapperAnimation]);
    }

    const leaveAnimation = (baseEl: any) => {
      return enterAnimation(baseEl).direction('reverse');
    }

    const modal = await this.modalController.create({
      component: ViewPublicationsPage,
      enterAnimation,
      leaveAnimation,
      componentProps: {
        folderId: folderId,
      },
      cssClass: 'new-action',
      backdropDismiss: false
    });
    await modal.present();
    modal.onDidDismiss();
  }
}