import { AcademyUserSelectModalPage } from './../academy-user-select-modal/academy-user-select-modal.page';
import { Component, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';
import { TranslateService } from "@ngx-translate/core";
import { IonInfiniteScroll, NavController, ModalController, IonRouterOutlet, AlertController } from "@ionic/angular";
import { UtilsService } from "../../services/utils.service";
import { HomeService } from "../../services/home.service";
import { CityService } from "../../services/city.service";
import { AcademyEnrollmentPage } from "../academy-enrollment/academy-enrollment.page";
import { ActivatedRoute, NavigationStart, Router } from "@angular/router";
import { AcademyFullEnrollmentPage } from '../academy-full-enrollment/academy-full-enrollment.page';
import { AcademyService } from '../../services/academy.service';
import { AcademyUserCardPage } from '../academy-user-card/academy-user-card.page';
import { CommsService } from '../../services/comms.service';
import { AcademyDocumentsPage } from '../academy-documents/academy-documents.page';
import { UserService } from '../../services/user.service';
import { CartService } from '../../services/cart.service';

@Component({
  selector: 'app-academy',
  templateUrl: './academy.page.html',
  styleUrls: ['./academy.page.scss'],
})
export class AcademyPage implements OnInit {
  loading: boolean = false;
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  @Output() closeModal = new EventEmitter();
  token: any;
  academy_users: any[] = [];
  academy_reports: any[] = [];
  offset = 0;
  take = 10;
  params = {};
  banners: any = [];
  periods: any = [];
  time;
  selectedAcademyUser;
  typeAcademy: any = "children";

  constructor(
    public translateService: TranslateService,
    private utilsService: UtilsService,
    public homeProvider: HomeService,
    public navCtrl: NavController,
    public cityProvider: CityService,
    public modalCtrl: ModalController,
    private router: Router,
    public routerOutlet: IonRouterOutlet,
    private academyService: AcademyService,
    public alertController: AlertController,
    public commsService: CommsService,
    public route: ActivatedRoute,
    private userService: UserService,
    private cartService: CartService,
  ) {
    router.events.subscribe((event: NavigationStart) => {
      if ((event.navigationTrigger === 'popstate' || event.navigationTrigger === 'imperative') && event.url.includes('academy') && !event.url.includes('shop') && !event.url.includes('-')) {
        setTimeout(() => {
          this.loadInit();
        }, 100);
      }
    });
  }

  ngOnInit() {
    this.typeAcademy = this.route.snapshot.paramMap.get("type_academy") ?? 'children';
    this.loadInit(0, true);
  }

  loadInit(time = 0, loadNeeded = false) {
    if (!this.utilsService.loadingPage || loadNeeded) {
      this.utilsService.loadingPage = true;
      this.academy_users = [];
      setTimeout(() => {
        this.time = new Date().getTime();
        return new Promise((resolve, reject) => {
          this.utilsService.presentLoading(this.translateService.instant("all.loading")).then(() => {
            Promise.all([
              this.commsService.getPopups('academy'),
              this.commsService.getBanners('academy').then((banners) => {
                this.banners = banners;
              }),
              this.academyService.getFromAcademyUsers(this.typeAcademy).then((academyUsers: any) => {
                this.academy_users = academyUsers;

                if (this.selectedAcademyUser) {
                  this.selectedAcademyUser = this.academy_users.find(i => i.id === this.selectedAcademyUser.id);
                }

                if (!this.selectedAcademyUser) {
                  this.selectedAcademyUser = this.academy_users[0];
                }
              })
            ]).then(() => {
              this.utilsService.closeAllAlerts();
              this.utilsService.loadingPage = false;
              resolve(false);
            }).catch((error) => {
              this.utilsService.closeAllAlerts();
              this.utilsService.loadingPage = false;
              console.log('Error loadInit AcademyPage', error);
              reject(error);
            });
          });
        });
      }, time);
    }
  }

  async modalAcademyEnrollment(typeAcademy: any, user = null) {
    if (!this.userService.validateAlertsUseApp('document')) {
      return;
    }

    var createData = {
      component: AcademyEnrollmentPage,
      canDismiss: true,
      presentingElement: this.routerOutlet.nativeEl,
      componentProps: {
        typeAcademy: typeAcademy
      }
    }

    if (user) {
      createData.componentProps['user'] = user;
    }

    const modal = await this.modalCtrl.create(createData);
    modal.onDidDismiss().then(() => {
      this.loadInit(100, true);
    });

    await modal.present();
  }

  async modalAcademyFullEnrollment(user) {
    const modal = await this.modalCtrl.create({
      component: AcademyFullEnrollmentPage,
      canDismiss: true,
      presentingElement: this.routerOutlet.nativeEl,
      componentProps: {
        user: user
      }
    });

    modal.onDidDismiss().then(() => {
      this.loadInit(100, true);
    });

    await modal.present();
  }

  async modalAcademyDocuments(academyUser: any, typeAcademy: any, externalFormExclusive = false) {
    const modal = await this.modalCtrl.create({
      component: AcademyDocumentsPage,
      canDismiss: true,
      presentingElement: this.routerOutlet.nativeEl,
      componentProps: {
        academyUser: academyUser,
        typeAcademy: typeAcademy,
        externalFormExclusive: externalFormExclusive,
        routerOutlet: this.routerOutlet
      }
    });

    modal.onDidDismiss().then(() => {
      this.loadInit(100, true);
    });
    await modal.present();
  }

  async academyUserPayments(user) {
    this.router.navigate(["/academy-payments/" + user.id]);
  }

  async academyUserProfile(user) {
    this.router.navigate(["/academy-user-profile/" + user.id]);
  }

  async openUserCard(user: any) {
    const modal = await this.modalCtrl.create({
      component: AcademyUserCardPage,
      canDismiss: true,
      presentingElement: this.routerOutlet.nativeEl,
      componentProps: {
        user: user
      }
    });
    await modal.present();
  }

  doRefresh(event) {
    setTimeout(() => {
      this.loadInit(100, true);
      event.target.complete();
    }, 500);
  }

  goToSportsReport(user: any) {
    if (user.isReportValid) {
      this.router.navigate(["/academy-reports/" + user.id]);
    } else {
      this.reportAlert();
    }
  }

  goToRenewal(user: any) {
    if (!user.isRenewable) {
      this.renewalAlert();
      return
    }
    this.academyService.goToRenewalAcademyUsers(user.id).then((patchedUser: any) => {
      this.loadInit()
    })
  }

  async reportAlert() {
    const alert = document.createElement('ion-alert');
    alert.header = this.translateService.instant("ALERT_HEADER_REPORT");
    alert.message = this.translateService.instant("ALERT_MESSAGE_REPORT");
    alert.buttons = ['OK'];

    document.body.appendChild(alert);
    await alert.present();
  }

  async renewalAlert() {
    const alert = document.createElement('ion-alert');
    alert.header = this.translateService.instant("ALERT_HEADER_REPORT");
    alert.message = this.translateService.instant("ALERT_MESSAGE_RENEWAL");
    alert.buttons = ['OK'];

    document.body.appendChild(alert);
    await alert.present();
  }

  goToTournamentPayments(user: any) {
    this.router.navigate(["/academy-tournaments/" + user.id]);
  }

  goToNews(user: any) {
    this.router.navigate(["/academy-news-list/" + user.id]);
  }

  async selectAcademyUser() {
    const modal = await this.modalCtrl.create({
      component: AcademyUserSelectModalPage,
      cssClass: "modal-popup",
      showBackdrop: false,
      canDismiss: true,
      backdropDismiss: true,
      componentProps: { academy_users: this.academy_users },
    });

    modal.onDidDismiss().then((data) => {
      if (data && data.data) {
        this.selectedAcademyUser = data.data;
      }
    });

    return await modal.present();
  }

  parButtons() {
    let buttons = this.selectedAcademyUser.academy_state.app_components.split(',').filter(i => i.includes('Botón'));
    return buttons.length % 2 == 0;
  }

  validateIDCardButton() {
    return !this.selectedAcademyUser.academy_state.app_components.includes('Botón carné');
  }

  goToAcademyStore() {
    this.cartService.currentAcademyUserId = this.selectedAcademyUser.id;
    this.router.navigate(["/shop/academy"]);
  }

}