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, AfterContentInit } from '@angular/core';
import {MapsAPILoader} from '@agm/core';
import * as $ from 'jquery';
import { NgxSpinnerService } from 'ngx-spinner';

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

  constructor(private externalService: ExternalPageService, 
    private spinner: NgxSpinnerService,
    private router: Router,
    private route: ActivatedRoute,
    private authSer:AuthServiceService) { 
      this.spinner.show();
    }

  reports = [];
  events = [];
  services = [];
  secondAdvertisiment = [];
  hypnosisSections = [];
  intensiveCare = []; 
  recordsOfMonth = [];
  achievements = [];

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

  contentSubscription:Subscription;

  firstAdvertisiment = [];
  mySlideOptions={items: 3, dots: false, nav: true};
  myCarouselOptions={items: 3, dots: true, nav: true};

  

  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'];
        for(let i = 0; i < this.externalService.headerMenus.length; i++) {
          this.externalService[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) + '.......';
          }
        }
        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'];
        this.achievements = responce['data'].external_achievements;
        this.lat = responce['data']['reach_map'].latitude;
        this.lng = responce['data']['reach_map'].longitude;
        console.log('fiiiiiiiiiiiiiiiiiiiii' , this.firstAdvertisiment);
        this.spinner.hide();
      },
      (error) => {
        console.log(error);
      }
    );

  }


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

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

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

  ngAfterContentInit() {
    // $(document).ready(function(){
    //   $('.carousel').carousel(); 
    // })
  }


}