import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewChildren, QueryList, ElementRef } from '@angular/core';
import { IonicSlides, ModalController } from '@ionic/angular';
import { Publication } from 'src/app/models/publication';
import { PublicationFolder } from 'src/app/models/publicationfolder';
import { PublicationsService } from 'src/app/services/publications.service';

import { NewPublicationPage } from 'src/app/pages/publications/new-publication/new-publication.page';
import { PublicationPipe } from 'src/app/pipes/publication.pipe';
import { ThemeService } from 'src/app/services/theme.service'
import { ToastService } from 'src/app/services/toast.service';
import { EditActionPage } from 'src/app/pages/publications/edit-action/edit-action.page';
import { Storage } from '@ionic/storage';
import { PermissionService } from 'src/app/services/permission.service';
import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
import { PublicationFolderService } from 'src/app/store/publication-folder.service';
import { AskModalPage } from 'src/app/modals/ask-modal/ask-modal.page';
import { checkFileTypeService } from 'src/app/services/checkFileType.service';
import  { PublicationVideoManagerService } from "src/app/services/publication/publication-video-manager.service";
import { StopvideoService } from "src/app/services/stopvideo.service";
@Component({
  selector: 'app-view-publications',
  templateUrl: './view-publications.page.html',
  styleUrls: ['./view-publications.page.scss'],
})
export class ViewPublicationsPage implements OnInit {
  showLoader: boolean;
  loading: any;

  error: any;
  oldpublicationIds = []

  @Input() folderId: any;
  @Output() addNewPublication = new EventEmitter<any>();
  @Output() editPublication = new EventEmitter<any>();
  @Output() openPublicationDetails = new EventEmitter<any>();
  @Output() goBackToViewPublications = new EventEmitter();
  @Output() closeDesktopComponent = new EventEmitter<any>();
  @Output() goBacktoPublicationDetails = new EventEmitter<any>();
  @Output() getActions = new EventEmitter<any>();

  publicationPipe = new PublicationPipe()

  swiperModules = [IonicSlides];
  @ViewChild('myVideo') myVideo: any;
  @ViewChild('VideoManager') VideoManager;

  @ViewChildren('videoElement') videoElements: QueryList<ElementRef>;

  public lastScrollTop = 0;
  public isHidden = false;

  constructor(
    private modalController: ModalController,
    private publications: PublicationsService,
    public ThemeService: ThemeService,
    private toastService: ToastService,
    private storage: Storage,
    public p: PermissionService,
    private httpErrorHandle: HttpErrorHandle,
    public publicationFolderService: PublicationFolderService,
    public checkFileType: checkFileTypeService,
    private publicationVideoManagerService: PublicationVideoManagerService,
    public StopvideoService: StopvideoService
  ) {


    setTimeout(() => {
      // document.querySelector("swiper-container").shadowRoot.querySelector(".swiper-button-next").innerHTML = "ok"
      // alert("ok")
      // console.log("this.VideoManager", this.VideoManager, document.querySelector('.VideoManager'))
      /* this.publicationVideoManagerService.setContainer(this.VideoManager.nativeElement) */
    }, 15000)

    // this.publicationVideoManagerService.setContainer(this.VideoManager.nativeElement)
    this.createPublicationList()

  }


  onVisibilityChange = (e: boolean) => {

    console.log("nice to have", e)
    if(!e) {
      /* this.stopVideo() */
    }
  }
  ngOnInit() {
    if (typeof (this.folderId) == 'object') {
      this.folderId = this.folderId['ProcessId']
    }

    this.createPublicationList()

    window['app-view-publications-page-doRefresh'] = this.doRefresh
    window['_deletePublication'] = (a, b) => {
      this._deletePublication(a, b)
    }

    this.getFromDB();

  }

  ngOnChanges(changes: any): void {

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

    if (!this.publicationFolderService.publicationList[this.folderId]) {
      this.publicationFolderService.FolderDetails[this.folderId] = new PublicationFolder();
    }

    this.createPublicationList()

    this.getFromDB();

    this.getPublicationDetail();
    this.getPublicationsIds();

    this.stopVideo();


  }


  createPublicationList(folderId = this.folderId) {
    if (!this.publicationFolderService.publicationList[this.folderId]) {
      this.publicationFolderService.publicationList[this.folderId] = []
    }
    if (!this.publicationFolderService.FolderDetails[this.folderId]) {
      this.publicationFolderService.FolderDetails[this.folderId] = new PublicationFolder();
    }

  }

  doRefresh = (event) => {

    this.getPublicationDetail();
    this.getPublicationsIds();
  }

  close() {
    this.closeDesktopComponent.emit();
  }

  getPublicationDetail() {
    const folderId = this.folderId
    this.publications.GetPresidentialAction(folderId).subscribe(res => {

      // PublicationDetailsModel.create(res)
      this.publicationFolderService.FolderDetails[folderId] = res
      this.storage.set(folderId + "name", res)
    }, (error) => {
      this.showLoader = false;
      // this.httpErroHandle.httpStatusHandle(error)
    });
  }

  async getPublicationsIds() {

    this.showLoader = true;
    const folderId = this.folderId

    try {
      const publicationIds = await this.publications.GetPublicationsList(folderId).toPromise();

      this.createPublicationList(folderId)
      let loadLater = []
      for (let publicationId of publicationIds) {

        if (!this.publicationIsPresent(publicationId, folderId)) {
          await this.loadPublication(publicationId, folderId)

        } else {
          loadLater.push(publicationId)
        }
      }

      for (let publicationId of loadLater) {
        await this.loadPublication(publicationId, folderId)
      }


      for (let localPublication of this.publicationFolderService.publicationList[folderId]) {

        const apiPublication = publicationIds.includes(localPublication.DocumentId)
        if (!apiPublication) {
          this.publicationFolderService.deletePost(folderId, localPublication.DocumentId)
        }
      }

      this.showLoader = false;

      this.storage.set(folderId, this.publicationFolderService.publicationList[folderId]);

      this.oldpublicationIds = publicationIds
    } catch (error) {
      this.showLoader = false;
    }

  }

  _deletePublication = (folderId, publicationId) => {

    this.publicationFolderService.publicationList[folderId] = this.publicationFolderService.publicationList[folderId].filter(e => e.DocumentId != publicationId)

  }

  publicationIsPresent(publicationId, folderId) {
    return this.publicationFolderService.publicationList[folderId].find(e => e.DocumentId == publicationId)
  }
  publicationFind(publicationId, folderId) {
    return this.publicationFolderService.publicationList[folderId].find(e => e.DocumentId == publicationId)
  }
  publicationFindIndex(publicationId, folderId) {
    return this.publicationFolderService.publicationList[folderId].findIndex(e => e.DocumentId == publicationId)
  }

  async loadPublication(publicationId, folderId) {
    let Publication = await this.publications.GetPublicationWithArrayOfFilesById(publicationId).toPromise();
    let publicationDetails: Publication = this.publicationPipe.itemList(Publication)

    const findIndex = this.publicationFindIndex(publicationId, folderId)
    const found = this.publicationIsPresent(publicationId, folderId)

    if (!found) {
      this.publicationFolderService.publicationList[folderId].push(publicationDetails)
      this.publicationFolderService.revertPublicationOrder(folderId)
    } else {

      let a: any = Object.assign({},this.publicationFolderService.publicationList[folderId][findIndex])
      let b: any = Object.assign({}, publicationDetails)

      a.Files = a.Files.length
      b.Files = b.Files.length

      if(JSON.stringify(a) !=  JSON.stringify(b)) {

        // console.log({a, b})
        this.publicationFolderService.publicationList[folderId][findIndex] = publicationDetails
      } else {
        // console.log({publicationDetails})
      }

    }

  }

  getFromDB() {
    const folderId = this.folderId

    this.publicationFolderService.getFromDB(folderId)
  }


  async AddPublication(publicationType: any, folderId: any) {

    if (window.innerWidth < 701) {
      const modal = await this.modalController.create({
        component: NewPublicationPage,
        componentProps: {
          publicationType: publicationType,
          folderId: folderId,
        },
        cssClass: 'new-publication modal modal-desktop',
        backdropDismiss: false
      });

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

      await modal.present();
    } else {
      this.addNewPublication.emit({
        publicationType: publicationType,
        folderId: folderId
      })
    }

  }

  async openEditPublication(folderId?: any) {

    if (window.innerWidth < 701) {
      const modal = await this.modalController.create({
        component: EditActionPage,
        componentProps: {
          folderId: folderId,
        },
        cssClass: 'new-action modal modal-desktop',
        backdropDismiss: true
      });

      modal.onDidDismiss().then(() => {
        // Do nothing
      });
      await modal.present();
    }
    else {
      this.editPublication.emit(folderId);
    }
  }

  async deletePublication(folderId?: any) {

    const modal = await this.modalController.create({
      component: AskModalPage,
      cssClass: 'discart-expedient-modal',
      backdropDismiss: true,
      componentProps: {
        title: 'Deseja arquivar este acção?',
        /* description: 'Nota: Ao Efetuar esta operação, o tratamento deste acção não poderá ser realizado a partir da lista de acções' */
      },
    });

    modal.onDidDismiss().then((res) => {
      if (res.data == 'Yes') {
        const loader = this.toastService.loading();
        try {
          this.publications.DeletePresidentialAction(folderId).toPromise();
          this.httpErrorHandle.httpsSucessMessagge('Eliminar Acção')
        } catch (error) {
          this.httpErrorHandle.httpStatusHandle(error)
        }
        finally {
          loader.remove()
        }
        this.close();
        this.getActions.emit();
      }
      // Do nothing
    });
    await modal.present();

  }

  async viewPublicationDetail(DocumentId: string, ProcessId: string) {


    this.stopVideo();

    setTimeout(()=> {
      this.openPublicationDetails.emit({ DocumentId, ProcessId });
    }, 200)

  }


  preventVideoPlay(event: Event): void {


    // Prevent the default behavior of the click event (which is to play the video)
    event.preventDefault();

    // You may also want to stop the propagation of the event to prevent any parent click handlers
    // event.stopPropagation();

    // Optionally, you can add additional logic here

    const videoElement: HTMLVideoElement = event.target as HTMLVideoElement;

    videoElement.pause()
  }


  stopVideo() {
    var videos = document.querySelectorAll('video');

    // Pause each video
    videos.forEach(function (video) {
      video.pause();
    })


    this.videoElements.forEach(videoElement => {
      // You can access the native HTML video element using videoElement.nativeElement
      const video: HTMLVideoElement = videoElement.nativeElement;

      video.pause()
      // Do something with each video element
      // console.log(video);
    });
  }

  public onScroll(event): void {
    if(this.lastScrollTop < event.detail.scrollTop) {
      // console.log("scrolling down")
  } else {
      // console.log("scrolling up")
  }

  this.lastScrollTop = event.detail.scrollTop;
  }

}