import { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ModalController, IonicSlides, Platform } 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 { NewPublicationPage } from '../new-publication/new-publication.page';
import { PublicationDetailPage } from './publication-detail/publication-detail.page';
import { BackgroundService } from 'src/app/services/background.service';
import { ThemeService } from 'src/app/services/theme.service'
import { ToastService } from 'src/app/services/toast.service';
import { PermissionService } from 'src/app/services/permission.service';
import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
import { Storage } from '@ionic/storage';
import { PublicationFolderService } from 'src/app/store/publication-folder.service';
// import { CapacitorVideoPlayer } from 'capacitor-video-player';
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"
import { Result } from 'neverthrow';
import { App } from '@capacitor/app';
import { ActiveTabService } from 'src/app/services/active-tab.service';
import { PublicationHolderService } from 'src/app/services/publication/publication-holder.service'

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


  defaultImage = "/assets/icon/icon-no-image.svg";
  folderId: string;
  id: string;
  error: any;
  arrayOfFile: any = [];

  publicationPipe = new PublicationPipe()
  publicationDitails: any;
  getpublication = [];
  private videoUrl: any;
  swiperIndex: number = 0;

  slideOpts = {
    initialSlide: 0,
    speed: 400,
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    }
  };
  swiperModules = [IonicSlides];

  publicationList: any

  @ViewChild('VideoManager') VideoManager;
  @ViewChildren('videoElement') videoElements: QueryList<ElementRef>;
  @ViewChild('swiper')
  swiperRef: ElementRef | undefined;

  constructor(
    private modalController: ModalController,
    private publications: PublicationsService,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private backgroundservice: BackgroundService,
    public ThemeService: ThemeService,
    private toastService: ToastService,
    public p: PermissionService,
    private httpErroHandle: HttpErrorHandle,
    private storage: Storage,
    public publicationFolderService: PublicationFolderService,
    public checkFileType: checkFileTypeService,
    private publicationVideoManagerService: PublicationVideoManagerService,
    public stopvideoService: StopvideoService,
    public platform: Platform,
    public activeTabService: ActiveTabService,
    public PublicationHolderService: PublicationHolderService) {


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


    setTimeout(() => {

      console.log(this.VideoManager.nativeElement)
    }, 2000)

    this.createPublicationList()

    this.getFromDB();

    this.activatedRoute.paramMap.subscribe(params => {

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

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

  ngOnInit() {

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

    this.createPublicationList()

    this.getFromDB();
    //this.testForkJoin()
    this.getPublicationDetail();
    this.getPublicationsIds();
    /* setTimeout(() => {
      this.getPublications();
    }, 1000); */

    this.backgroundservice.registerBackService('Online', () => {
      this.getPublicationDetail();
      //this.testForkJoin()

    })

    // console.log(this.publicationFolderService.publicationList[this.folderId])

    setTimeout(()=> {

      // this.doRefresh({})

    }, 1500)

  }


  onVisibilityChange = (e: boolean) => {
    if (!e) {
      this.stopVideo()
    }
  }


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

    try {
      // 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);
      });
    } catch (error) {
      console.log(error)
    }
  }

  ngOnChanges() {

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

    this.createPublicationList()

    this.getFromDB();
  }

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

  doRefresh = (event) => {
    //setTimeout(() => {
    //this.testForkJoin()
    this.getPublicationDetail();
    this.getPublicationsIds();
    try {
      event?.target?.complete();
    } catch (error) { }
    //}, 3000);

  }

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

  goBack() {
    if (window["sharedContent"]) {
      if (this.platform.is('android'))
        App.exitApp();
      return
    }
    this.router.navigate(['/home/publications']);
  }

  getPublicationDetail() {
    const folderId = this.folderId
    this.publications.GetPresidentialAction(folderId).subscribe(res => {
      this.publicationFolderService.FolderDetails[folderId] = res
      this.storage.set(folderId + "name", res)
    }, (error) => {
      this.showLoader = false;
      // this.httpErroHandle.httpStatusHandle(error)
    });
  }

  getFromDB() {
    const folderId = this.folderId
    this.publicationFolderService.getFromDB(folderId)
  }

  async getPublicationsIds() {

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

    await this.publicationFolderService.getPublicationsIds(folderId)

    this.showLoader = false;

  }

  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 AddPublication(publicationType: any, folderId: any) {

    if(this.PublicationHolderService.PublicationFormMV.length == 0) {
      const modal = await this.modalController.create({
        component: NewPublicationPage,
        componentProps: {
          publicationType: publicationType,
          folderId: this.folderId,
        },
        cssClass: 'new-publication modal modal-desktop',
        backdropDismiss: false
      });

      modal.onDidDismiss().then(() => {
        this.doRefresh(event);
      });
      await modal.present();
    } else {
      this.toastService._successMessage('já existe uma publicação a ser processado');
    }

  }

  goToPublicationDetail(DocumentId: string, ProcessId: string) {

    this.stopVideo();

    setTimeout(() => {
      this.router.navigate(['/home/publications/view-publications', this.folderId, DocumentId]);
    }, 500)

  }

  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
  }

  async viewPublicationDetail(DocumentId: string) {
    // alert('nice');
    const modal = await this.modalController.create({
      component: PublicationDetailPage,
      componentProps: {
        DocumentId: DocumentId,
        folderId: this.folderId,
        isModal: true
      },
      cssClass: 'publication-detail modal modal-desktop',
      // backdropDismiss: false
    });

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

    await modal.present();
  }


  getSortedPublications(): Publication[] {
    const unsortedPublications = this.publicationFolderService.publicationList[this.folderId];

    if (unsortedPublications) {
      // Copiar a lista original para evitar alterações indesejadas
      const publicationsCopy = [...unsortedPublications];

      // Ordenar as publicações pelo DatePublication
      publicationsCopy.sort((a, b) => {
        const dateA = new Date(a.DatePublication).getTime();
        const dateB = new Date(b.DatePublication).getTime();
        return dateA - dateB;
      });

      return publicationsCopy;
    } else {
      return [];
    }
  }


  //click custom bullet go to slide
  goToSlide(index: number) {
    this.swiperIndex = this.swiperRef?.nativeElement.swiper.activeIndex;
    this.swiperRef?.nativeElement.swiper.slideTo(index);
    console.log('index slide', index)
  }

  onSlideChange() {
    this.swiperIndex = this.swiperRef?.nativeElement.swiper.activeIndex;
  }
}