import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { AlertController, ModalController, NavParams } from '@ionic/angular';
import { PublicationFolder } from 'src/app/models/publicationfolder';
import { PublicationsService } from 'src/app/services/publications.service';
import { NewActionPage } from './new-action/new-action.page';
import { ViewPublicationsPage } from './view-publications/view-publications.page';

import { AnimationController } from '@ionic/angular';
import { Publication } from 'src/app/models/publication';
import { ActionsOptionsPage } from 'src/app/shared/popover/actions-options/actions-options.page';
import { EditActionPage } from './edit-action/edit-action.page';
import { ToastService } from 'src/app/services/toast.service';
import { ThemeService } from 'src/app/services/theme.service'
import { PermissionService } from 'src/app/services/permission.service';
import { Storage } from '@ionic/storage';
import { NewPublicationPage } from './new-publication/new-publication.page';
import { ChunkService } from 'src/app/services/stream/chunk.service'
import { StreamService } from 'src/app/services/stream/stream.service'
import { HttpClient, HttpHeaders, HttpEventType } from '@angular/common/http';
import { PublicationFolderService } from 'src/app/store/publication-folder.service';

// import { ActionModel } from 'src/app/models/beast-orm';



@Component({
  selector: 'app-publications',
  templateUrl: './publications.page.html',
  styleUrls: ['./publications.page.scss'],
})
export class PublicationsPage implements OnInit {
  showLoader: boolean = false
  publicationFolder: PublicationFolder;
  publication: Publication;

  publicationsEventFolderList: PublicationFolder[] = [];
  actionsListStorage: PublicationFolder[] = new Array();
  publicationsTravelFolderList: PublicationFolder[] = [];

  theDate: any;
  theEndDate: any;
  customDate: any;
  months: string[];
  days: string[];


  desktopComponent: any = {
    showViewPublication: false,
    showAddNewPublication: false,
    showPublicationDetail: false,
    showAddActions: false,
    showEditActions: false
  }

  folderId: string;
  documentId: any
  // data set from child component
  publicationType: any;
  publicationId: string;

  // from publication details
  //publication: object;
  hideRefreshBtn = true;
  showSlidingOptions = true;
  idSelected: string;
  intent: any;

  constructor(
    private router: Router,
    private modalController: ModalController,
    private animationController: AnimationController,
    private publications: PublicationsService,
    private toastService: ToastService,
    public ThemeService: ThemeService,
    public p: PermissionService,
    private storage: Storage,
    private ChunkService: ChunkService,
    private StreamService:StreamService,
    private http: HttpClient,
    public publicationFolderService: PublicationFolderService,


  ) {
    this.months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
    this.days = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
    this.intent = window["sharedContent"]

    console.log('shared recived', this.intent)

    window['goToPublicationsList'] = this.goToPublicationsList

    window['updateAction'] = () => {
      this.getActions()
    }

  }



  checkQueryParameter() {
    // var urlSearchParams = new URLSearchParams(window.location.search);

    // var folderId = urlSearchParams.get('folderId');
    if (this.publicationFolderService.gotoAction) {
      const folderId = this.publicationFolderService.gotoAction
      this.goToPublicationsList(folderId)
      this.publicationFolderService.gotoAction = false
    } else {
    }
  }

  ngOnInit() {

    const pathname = window.location.pathname
    this.getActions();
    this.checkQueryParameter()

    this.router.events.forEach((event) => {
      if (event instanceof NavigationEnd && event.url == pathname) {
        console.log('=================', this.publicationFolderService.gotoAction)
        this.getActions();
        // this.checkQueryParameter()
      }
      this.intent = window['sharedContent']
    });

    this.hideRefreshButton();
    this.intent = window["sharedContent"]
    window["refreshPublication"] = this.refreshing

  }



  hideRefreshButton() {
    window.onresize = (event) => {
      if (window.innerWidth < 701) {
        this.hideRefreshBtn = false;
        this.showSlidingOptions = false;
      }
      else {
        this.hideRefreshBtn = true;
        this.showSlidingOptions = true;
      }
    }
    if (window.innerWidth < 701) {
      this.hideRefreshBtn = false;
      this.showSlidingOptions = false;
    }
    else {
      this.hideRefreshBtn = true;
      this.showSlidingOptions = true;
    }
  }

  refreshing = () => {
    setTimeout(() => {
      this.getActions();
    }, 1500);
  }

  doRefresh(event) {
    this.getActions();
    setTimeout(() => {
      try {
        event?.target?.complete();
      } catch(error) {}
    }, 250);
  }

  close() {
    window["sharedContent"] = null;
    this.intent = null;
   /*  this.router.navigateByUrl("/home/"); */
  }
  get windowInnerWidth(): number {
    return window.innerWidth
  }

  getDate(date) {
    this.theDate = new Date(date);
    return this.theDate.getDate() + " de " + (this.months[this.theDate.getMonth()]) + " de " + this.theDate.getFullYear()
  }


  getActions = () => {
    this.showLoader = true

    this.publications.GetPublicationFolderList().subscribe(async res => {
      this.showLoader = false;
      const folders: PublicationFolder[] = this.getPublicationFolderMap(res)

      this.publicationsEventFolderList = folders.filter((e)=>e.ActionType == 'Evento')

      await this.storage.set('actionsEvents', this.publicationsEventFolderList);

      this.showLoader = false;

    }, (error) => {
      this.showLoader = false;
      this.getFromDB()
    });

  }

  getPublicationFolderMap(events: any):PublicationFolder[] {
    return events.map((data) : PublicationFolder => {
      return  {
        ProcessId: data.ProcessId,
        Description: data.Description,
        Detail: data.Detail,
        DateBegin: data.DateBegin,
        DateEnd: data.DateEnd,
        ActionType: data.ActionType,
      }
    });
  }

  async getFromDB() {

    //const folders: PublicationFolder[] = await ActionModel.all()
    //this.showLoader = false;
    // this.publicationsEventFolderList = folders


    this.storage.get('actionsEvents').then((events = []) => {

      if(Array.isArray(events)) {
        const folders: PublicationFolder[] = this.getPublicationFolderMap(events)

        this.showLoader = false;
        this.publicationsEventFolderList = folders
      }

    });
    this.storage.get('actionsViagens').then((viagens = []) => {

      if(Array.isArray(viagens)) {
        const folders: PublicationFolder[] = this.getPublicationFolderMap(viagens)

        this.publicationsTravelFolderList = folders
        this.showLoader = false;
      }

    });

  }

  async onFileSelect(event: any) {

    const file:File = event.target.files[0];


    const chunkSize = 1024 * 1024; // Adjust the chunk size as needed
    const chunks = [];
    let offset = 0;
    let i = 0;
    let j = 0;

    function count () {
      j++
      return j
    }

    while (offset < file.size) {
      const chunk = file.slice(offset, offset + chunkSize);
      const reader = new FileReader();

      reader.onload = async () => {

        const headers = new HttpHeaders()
        .append('X-File-Name', "fileName")
        .append('X-File-Extension', "mp4")
        .append('X-File-Content-Length', i.toString())
        .append('X-File-Index', count().toString());

        const a = new Uint8Array(reader.result as ArrayBuffer)
        await this.http.post('http://localhost:3001/upload', a.buffer, { headers, responseType: 'blob' }).toPromise();


      };
      reader.readAsArrayBuffer(chunk);
      offset += chunkSize;
      i++;
    }



  }



  async editAction(folderId?: string) {
    const modal = await this.modalController.create({
      component: EditActionPage,
      componentProps: {
        folderId: folderId,
      },
      cssClass: 'new-action modal modal-desktop',
      backdropDismiss: true
    });

    modal.onDidDismiss().then(() => {
      this.getActions();
    });
    await modal.present();
    //this.refreshing()
  }

  async deleteAction(id?: string) {
    const loader = this.toastService.loading();
    try {
      await this.publications.DeletePresidentialAction(id).toPromise();
      this.toastService._successMessage()
    } catch (error) {
      if(error.status == 0) {
        this.toastService._badRequest('Sem acesso à internet. Por favor verifique sua conexão')
      } else {

        this.toastService._badRequest()
      }
    }
    finally {
      loader.remove()
      this.refreshing()
    }

  }

  async AddPublicationFolder(item?: any) {

    this.closeDesktopComponent();
    this.idSelected = '';

    if (window.innerWidth < 701) {

      const modal = await this.modalController.create({
        component: NewActionPage,
        componentProps: {
          item: item,
        },
        cssClass: 'new-action modal modal-desktop',
        backdropDismiss: false
      });

      modal.onDidDismiss().then(() => {
        this.getActions();
      });
      await modal.present();
    } else {
      this.desktopComponent.showAddActions = true;
    }

  }

  async AddPublication(publicationType: any, folderId: any,intent: any) {
    const modal = await this.modalController.create({
      component: NewPublicationPage,
      componentProps: {
        publicationType: publicationType,
        folderId: folderId,
        intent: window["sharedContent"]
      },
      cssClass: 'new-publication modal modal-desktop',
      backdropDismiss: false
    });

    modal.onDidDismiss().then(() => {
      this.intent = window["sharedContent"]
      // this.doRefresh(event);
      this.checkQueryParameter();
    });
    await modal.present();
  }

  goToPublicationsList = (folderId: string) => {
    console.log('nice', folderId)
    if(window["sharedContent"]){
      this.AddPublication('2',folderId,window["sharedContent"])
      return
    }
    if (window.innerWidth < 701) {
      this.router.navigate(['/home/publications', folderId]);
      this.idSelected = "";
    } else {
      this.closeDesktopComponent();
      this.idSelected = folderId;
      this.folderId = folderId
      this.desktopComponent.showViewPublication = true;
    }

  }

  async viewPublications(folderId: string) {
    this.folderId = 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');
    }


    this.closeDesktopComponent();

    // OpenModal
    if (window.innerWidth < 701) {
      /* let item =  this.publicationFolderList; */
      const modal = await this.modalController.create({
        component: ViewPublicationsPage,
        //enterAnimation,
        //leaveAnimation,
        componentProps: {
          folderId: folderId,
        },
        cssClass: 'new-action modal modal-desktop',
        backdropDismiss: false
      });

      modal.onDidDismiss();
      await modal.present();

    } else {
      // open angular component
      this.folderId = folderId
      this.desktopComponent.showViewPublication = true;
    }

  }

  // called from publications details
  // Emittter
  goBackToViewPublications() {

    this.closeDesktopComponent();
    this.idSelected = this.folderId;
    this.desktopComponent.showViewPublication = true;
  }

  // called from publications details
  // Emitters
  goBackToPubications() {
    this.closeDesktopComponent();
    this.idSelected = this.folderId;
    this.desktopComponent.showViewPublication = true;
  }

  // called from edit publication (Emitters only)
  // Emitters
  async goBacktoPublicationDetails() {
    this.closeDesktopComponent();
    this.desktopComponent.showPublicationDetail = true;

  }

  // add new publication or edit publicaton
  async addNewPublication({ publicationType, folderId, publication }) {

    this.closeDesktopComponent();

    // propr to add new publication
    this.publicationType = publicationType;
    // edit publication will send null
    if (folderId != undefined) {
      this.folderId = folderId;
      this.idSelected = this.folderId;
    }

    console.log({publication})
    this.publication = publication;
    this.documentId = publication?.DocumentId
    this.desktopComponent.showAddNewPublication = true;
  }

  async editPublication(foolderId: string) {
    this.closeDesktopComponent();
    this.idSelected = this.folderId;
    this.desktopComponent.showEditActions = true;
  }

  async openPublicationDetails({DocumentId, ProcessId}) {

    this.publicationId = DocumentId;

    this.closeDesktopComponent();
    this.idSelected = this.folderId;
    this.desktopComponent.showPublicationDetail = true;

  }

  async updateDesktopComponent(e?: any) {
    this.getActions();
  }

  async closeDesktopComponent(xx?: any) {

    this.desktopComponent = {
      showViewPublication: false,
      showAddNewPublication: false,
      showPublicationDetail: false,
      showAddActions: false,
      showEditActions: false,
    }


    setTimeout(()=>{
      if(this.desktopComponent.showViewPublication == false &&
        this.desktopComponent.showAddNewPublication == false &&
        this.desktopComponent.showPublicationDetail == false &&
        this.desktopComponent.showAddActions == false &&
        this.desktopComponent.showEditActions == false) {
          this.idSelected = "";
        }
    }, 10)


  }

  async openOptions(id?: string) {
    this.folderId = id;
    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: '1', right: '-100%' },
          { offset: 1, opacity: '1', right: '0px' }
        ]);

      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({
      enterAnimation,
      leaveAnimation,
      component: ActionsOptionsPage,
      cssClass: 'model profile-modal search-submodal',
      componentProps: {
        id: id,
      },
      //translucent: true
    });

    modal.onDidDismiss().then(res => {
      if (res['data'] == 'edit') {
        this.closeDesktopComponent();
        this.desktopComponent.showEditActions = true;
      } else if (res['data'] == 'delete') {
        setTimeout(() => {
          this.getActions();
        }, 1000)
        this.closeDesktopComponent()
      }
    });
    await modal.present();
  }

}