import { NgxSpinnerService } from 'ngx-spinner';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { AuthServiceService } from './../../shared/auth-service.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-external-events-table',
  templateUrl: './external-events-table.component.html',
  styleUrls: ['./external-events-table.component.css']
})


export class ExternalEventsTableComponent implements OnInit {

  constructor(private authSer: AuthServiceService, 
    private http: HttpClient, 
    private spinner: NgxSpinnerService,
    private route: ActivatedRoute) { 
      this.spinner.show();
    }
    
    count: number;
    perPagePagenation: number;
    currentPage:number = 1;
    dataTableNumber: number = 5;
    eventsData = [];
    eventDetail = {
      title: '',
      title_en: '',
      description: '',
      description_en: '',
    }

  ngOnInit() {
    this.authSer.homeActivate = false;
    console.log(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.dataTableNumber);
    this.http.get(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.dataTableNumber).subscribe(
      (responce) => {
        this.eventsData = responce['event_bar'];
        this.count = responce['count'];
        this.perPagePagenation = responce['per_page'];
        console.log('eveeeents', this.eventsData);
        this.spinner.hide();
      },
      (error) => {
        console.log(error);
      }
    )
  }

    //change page 
    onPageChange(pagenationNumber) {
      this.spinner.show();
      this.currentPage = pagenationNumber;
      this.eventsData = [];
      //console.log(pagenationNumber);
      //console.log(this.pageId);
      
      this.http.get(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.perPagePagenation).subscribe(
        (responce) => {
          this.eventsData = responce['events'];
          this.count = responce['count'];
          this.perPagePagenation = responce['per_page'];
          console.log('eveeeents', this.eventsData);
          this.spinner.hide();
        },
        (error) => {
          console.log(error);
        }
      );
    }

    //determine the list count from select element 
    onGetValue(event) {
      this.spinner.show();
      this.eventsData = [];
      this.dataTableNumber = event.target.value;
      this.http.get(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.perPagePagenation).subscribe(
        (responce) => {
          this.eventsData = responce['events'];
          this.count = responce['count'];
          this.perPagePagenation = responce['per_page'];
          console.log('eveeeents', this.eventsData);
          this.spinner.hide();
        },
        (error) => {
          console.log(error);
        }
      );
    }

    detailEvent(eventData) {
      console.log(eventData);
      this.eventDetail.title = eventData.title;
      this.eventDetail.title_en = eventData.title_en;
      this.eventDetail.description = eventData.description;
      this.eventDetail.description_en = eventData.description_en;
    }

}
