import { Subscription } from 'rxjs';
import { Router, ActivatedRoute } from '@angular/router';
import { AuthServiceService } from './../../shared/auth-service.service';
import { ExternalPageService } from './../../shared/external-page.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import {MapsAPILoader} from '@agm/core';
import * as $ from 'jquery';
import { NgxSpinnerService } from 'ngx-spinner';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-external-page-content',
  templateUrl: './external-page-content.component.html',
  styleUrls: ['./external-page-content.component.css'],
  providers: [NgbCarouselConfig]
})
export class ExternalPageContentComponent implements OnInit, OnDestroy {

  constructor(private externalService: ExternalPageService, 
    private spinner: NgxSpinnerService,
    private router: Router,
    private http: HttpClient,
    private route: ActivatedRoute,
    config: NgbCarouselConfig,
    private toastr: ToastrService,
    public authSer: AuthServiceService) {
    this.spinner.show();
    
    }

  reports = [];
  events = [];
  services = [];
  secondAdvertisiment = [];
  hypnosisSections = [];
  intensiveCare = []; 
  recordsOfMonth = [];
  achievements = [];
  initialMonthNumber: number;
  checkStatisticShow: boolean = false;
  showSmallSpinner: boolean = false;

  title: string = 'My first AGM project';
  
  lat: number =  24.380000;
  lng: number = 46.430000;

  contentSubscription:Subscription;

  firstAdvertisiment = [];

  
 

  ngOnInit() {

    this.authSer.homeActivate = true;


    //to make class active is "0"
    this.externalService.getHeader().subscribe(
      (responce) => {
        console.log('Header', responce);
        this.externalService.headerMenus = responce['parents'];
        console.log(this.externalService);
        for(let i = 0; i < this.externalService.headerMenus.length; i++) {
          this.externalService.headerMenus[i].active = 0;
        }
      }
    );

    //get content data of external pages
   this.contentSubscription =  this.externalService.getContentData().subscribe(
      (responce) => {
        console.log(responce);
        this.reports = responce['data'].reports;
        for(let i = 0; i < this.reports.length; i++) {
          if(this.reports[i].description.length > 100) {
            this.reports[i].description = this.reports[i].description.substring(0,300) + '.......';
            this.reports[i].description_en = this.reports[i].description_en.substring(0,300) + '.......';
          }
          if(this.reports[i].photo == null){
            this.reports[i].photo = 'notfound.png'
          }
        }
        console.log(this.reports);
        
        this.events = responce['data'].events;
        this.services = responce['data'].external_services;
        this.firstAdvertisiment = responce['data'].first_advertising_services_row;
        this.secondAdvertisiment = responce['data'].second_advertising_services_row;
        this.hypnosisSections = responce['data'].visiting_times_hs;
        this.intensiveCare = responce['data'].visiting_times_ic;
        this.recordsOfMonth = responce['data']['statistics'];
        if(responce['data']['statistics'].statistics_values.length > 0) {
          this.checkStatisticShow = false;
        } else {
          this.checkStatisticShow = true;
        }
        
        this.achievements = responce['data'].external_achievements;
        this.initialMonthNumber = responce['data']['statistics'].month_id;
        //this.lat = responce['data']['reach_map'].latitude;
        //this.lng = responce['data']['reach_map'].longitude;
        this.spinner.hide();
      },
      (error) => {
        console.log(error);
      }
    );

  }


  nextMonth() {
    this.showSmallSpinner = true;
    this.recordsOfMonth = [];
    if(this.initialMonthNumber == 12) {
      this.initialMonthNumber = 12;
      console.log(this.initialMonthNumber);
      this.toastr.warning('أخر شهور العام !');
      this.http.get(this.authSer.pathApi + '/get_statistics_by_month_id/' + 12).subscribe(
        (responce) => {
          console.log(responce);
          this.showSmallSpinner = false;
          this.recordsOfMonth = responce['statistics'];
          if(responce['statistics'].statistics_values.length > 0) {
            this.checkStatisticShow = false;
          } else {
            this.checkStatisticShow = true;
          }
        },
        (error) => {
          console.log(error);
        }
      );
    } else {
      this.initialMonthNumber++;
      console.log(this.initialMonthNumber);
      this.http.get(this.authSer.pathApi + '/get_statistics_by_month_id/' + this.initialMonthNumber).subscribe(
        (responce) => {
          console.log(responce);
          this.showSmallSpinner = false;
          this.recordsOfMonth = responce['statistics'];
          if(responce['statistics'].statistics_values.length > 0) {
            this.checkStatisticShow = false;
          } else {
            this.checkStatisticShow = true;
          }
        },
        (error) => {
          console.log(error);
        }
      );
    }
 
  }

  prevMonth() {
    this.showSmallSpinner = true;
    this.recordsOfMonth = [];
    console.log(this.initialMonthNumber);
    if(this.initialMonthNumber == 1) {
      this.initialMonthNumber = 1;
      this.toastr.warning('أول شهور العام !');
      this.http.get(this.authSer.pathApi + '/get_statistics_by_month_id/' + 1).subscribe(
        (responce) => {
          this.showSmallSpinner = true;
          this.showSmallSpinner = false;
          this.recordsOfMonth = responce['statistics'];
          if(responce['statistics'].statistics_values.length > 0) {
            this.checkStatisticShow = false;
          } else {
            this.checkStatisticShow = true;
          }
        },
        (error) => {
          console.log(error);
        }
      );
    } else {
      this.initialMonthNumber--;
      this.http.get(this.authSer.pathApi + '/get_statistics_by_month_id/' + this.initialMonthNumber).subscribe(
        (responce) => {
          console.log(responce);
          this.showSmallSpinner = true;
          this.showSmallSpinner = false;
          this.recordsOfMonth = responce['statistics'];
          if(responce['statistics'].statistics_values.length > 0) {
            this.checkStatisticShow = false;
          } else {
            this.checkStatisticShow = true;
          }
        },
        (error) => {
          console.log(error);
        }
      );
    }
  }

  onGetService(serviceData) {
    console.log(serviceData);
    if(serviceData.type == 'internal') {
      this.router.navigate(['ExternalPage/externalServiceDetails/' + serviceData.id]);
    } else if(serviceData.type == 'external') {
      window.location.href = serviceData.link;
    }
  }

  onGetServiceData(serviceData) {
    console.log('service Data' , serviceData);
  }


  goPageNew(reprotData) {
    console.log(reprotData);
    this.router.navigate( ['ExternalPage/newPage/' + reprotData.id]);
  }

  oneventTable() {
    this.router.navigate(['/ExternalPage/EventsTable']);
  }

  ngOnDestroy() {
    this.contentSubscription.unsubscribe();
  }

  moreNewsPage() {
    this.router.navigate(['/ExternalPage/moreNews']);
  }


}