import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ModalController } from '@ionic/angular';
import { Publication } from 'src/app/models/publication';
import { PublicationFolder } from 'src/app/models/publicationfolder';
import { PublicationPipe } from 'src/app/pipes/publication.pipe';
import { PublicationsService } from 'src/app/services/publications.service';
import { PublicationEventFolderStorage } from 'src/app/store/publication-event-folder.service';
import { PublicationListStorage } from 'src/app/store/publication-list.service';
import { PublicationTravelFolderStore } from 'src/app/store/publication-travel-folder.service';
import { NewPublicationPage } from '../new-publication/new-publication.page';
import { PublicationDetailPage } from './publication-detail/publication-detail.page';

@Component({
  selector: 'app-view-publications',
  templateUrl: './view-publications.page.html',
  styleUrls: ['./view-publications.page.scss'],
})
export class ViewPublicationsPage implements OnInit {
  showLoader = true;
  loading: any;

  publicationList: Publication[] = new Array();
  item: PublicationFolder;
  folderId:string;
  error: any;

  publicationListStorage = PublicationListStorage
  //
  publicationEventFolderStorage = PublicationEventFolderStorage
  publicationTravelFolderService = PublicationTravelFolderStore

  publicationPipe = new PublicationPipe()

  constructor(
    private modalController: ModalController,
    private publications: PublicationsService,
    private activatedRoute: ActivatedRoute,
    private router: Router) {

    this.item = new PublicationFolder();
    this.activatedRoute.paramMap.subscribe(params => {
      console.log(params);

      if(params["params"]) {
        this.folderId = params["params"].folderId;
        console.log(params["params"]);
      }

      window['app-view-publications-page-doRefresh'] = this.doRefresh
    });
  }

  ngOnInit() {

    if(typeof(this.folderId) == 'object') {
      this.folderId = this.folderId['ProcessId']
    }

    this.getPublicationDetail();
      setTimeout(() => {
      this.getPublications();
    }, 3000);

  }

  ngOnChanges() {

    if(typeof(this.folderId) == 'object') {
      this.folderId = this.folderId['ProcessId']
    }

    this.getPublicationDetail();
    this.getPublications();
  }

  doRefresh =(event) => {
    setTimeout(() => {
      this.getPublicationDetail();
      this.getPublications();
      event.target.complete();
    }, 3000);

  }

  close() {
    this.modalController.dismiss();
    this.router.navigate(['/home/publications']);
  }

  goBack() {
    this.router.navigate(['/home/publications']);
  }

  getPublicationDetail() {

    setTimeout(() => {
      let allActions = this.publicationEventFolderStorage.list.concat(this.publicationTravelFolderService.list)
      this.item = allActions.find((e)=> e.ProcessId == this.folderId);
    }, 100);

  }

  getPublications() {
    this.showLoader = true;
    const folderId = this.folderId
    this.publications.GetPublications(this.folderId).subscribe(res=>{


      this.publicationList = new Array();
      
      res.forEach(element => {
        let item: Publication = this.publicationPipe.itemList(element)
        this.publicationList.push(item);
      });

      this.publicationListStorage.add(folderId, this.publicationList)

      this.showLoader = false;
    },
    (error)=>{
      if(error.status == '404'){
        this.error = 'Sem publicações disponíveis!';
        this.publicationList= [];
      }

      this.showLoader = false;

    });

  }

  async AddPublication(publicationType:any, folderId:any) {
    const modal = await this.modalController.create({
      component: NewPublicationPage,
      componentProps:{
        publicationType: publicationType,
        folderId: folderId,
      },
      cssClass: 'new-publication modal modal-desktop',
      backdropDismiss: false
    });
    await modal.present();
    modal.onDidDismiss().then(()=>{
      this.doRefresh(event);
    });
  }

  goToPublicationDetail(publicationId:string){
    this.router.navigate(['/home/publications/view-publications', this.folderId, publicationId]);
  }

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

}
