import { HttpClient } from '@angular/common/http';
import { UserService } from './../../shared/user.service';
import { Router, ActivatedRoute } from '@angular/router';
import { AuthServiceService } from './../../shared/auth-service.service';
import { Component, OnInit, AfterViewInit, ViewChild, EventEmitter } from '@angular/core';
import { InternalPageService } from '../../shared/internal-page.service';
import { NgxSpinnerService } from 'ngx-spinner';
import {NgbCarousel,NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';

import * as $ from 'jquery';
declare var jQuery: any;


@Component({
  selector: 'app-internal-page-content',
  templateUrl: './internal-page-content.component.html',
  styleUrls: ['./internal-page-content.component.css'],
  providers: [NgbCarouselConfig],
})


export class InternalPageContentComponent implements OnInit {

  @ViewChild('myCarousel') myCarousel: NgbCarousel;
  


  constructor(private authSer: AuthServiceService,
    private router:Router,
    private userservice: UserService,
    private internalService: InternalPageService,
    private route: ActivatedRoute,
    private config: NgbCarouselConfig,
    private http: HttpClient,
    private spinner: NgxSpinnerService) {
      this.spinner.show();
     }





    joinUs = [];
    reportsData = [];
    externalServices = [];
    congratulations = [];
    condolences = [];
    internalServices = [];
    tabsData = [];
    achievements = [];
    
    tabCongaData= {
      employee_name: '',
      employee_name_en: '',
      created_at: '',
      name: '',
      name_en: '',
    };

    tabSadData = {
      employee_name: '',
      employee_name_en: '',
      created_at: '',
      name: '',
      name_en: ''
    };
    
    joinTabData = {
      name: '',
      name_en: '',
      adminstration_name: '',
      adminstration_name_en: '',
      date_of_employment_hij: '',
      photo: '',
    };

    advertisiment = {
      photo : '',
      description: '',
      description_en: '',
    };

    checkShowData: boolean;
    tabtype:number = 0;
    expandedIndex:number;
    selectedItem: any = 0 //check تعاميم active class
    live_event = [];
    next_lecture = [];
    myInnerHeight = window.innerHeight;


    flag: boolean = false;

    catchEvent(event) {
      this.flag = true
      console.log(event)
    }

    hide(event) {
      this.flag = false;
    }

  ngOnInit() {
    console.log('content');
   //console.log(this.checkTokenExpire);
       //get profile data
    //this.spinner.show();
    this.userservice.getUserDataProfile();
    this.authSer.homeActivate = true;
    
    this.internalService.getParentData().subscribe(
      (responce) => {
        this.authSer.parentsPage = responce['parents'];
        for(let i = 0; i < this.authSer.parentsPage.length; i++) {
          this.authSer.parentsPage[i].active = 0;
        }
      },
      (error) => {
        console.log(error);
      }
    );

    this.internalService.getInternalPageData().subscribe(
      (responce) => {
        console.log(responce);
        this.externalServices = responce['data'].external_services;
        console.log('external services ', this.externalServices);
        this.reportsData = responce['data'].reports;
        console.log('report data', this.reportsData);

        for(let i = 0; i< this.reportsData.length; i++) {
          if(this.reportsData[i].description.length > 60) {
            this.reportsData[i].description = this.reportsData[i].description.substr(0,100) + '.......';
            this.reportsData[i].description_en = this.reportsData[i].description_en.substr(0,100) + 'Read More';
          }
        }

        this.live_event = responce['data'].live_lecture;
        this.next_lecture = responce['data'].next_lecture;

        this.joinUs = responce['data'].users;
        this.showJoinData(this.joinUs[0]);

        this.condolences = responce['data'].condolences_events;
        this.showTabData(this.condolences[0], 'sad');

        this.congratulations = responce['data'].congratulations_events;
        this.showTabData(this.congratulations[0], 'wedding');

        this.internalService = responce['data'].internal_services;
        console.log('internalService', this.internalService);

        this.tabsData = responce['data'].tabs;
        
        this.tabsData.map( (tab) => {
          tab.created_at = tab.created_at.split(' ')[0]; 
        });


        if(this.tabsData.length > 0) {
            this.checkShowData = false;
        } else {
            this.checkShowData = true;
        }

        this.achievements = responce['data'].achievements;
        
        this.advertisiment = {
          photo: responce['data']['main_ad'] ? responce['data']['main_ad'].photo : '',
          description: responce['data']['main_ad'] ? responce['data']['main_ad'].description: '',
          description_en: responce['data']['main_ad'] ? responce['data']['main_ad'].description_en: '',
        }

          this.spinner.hide();
        

      },
      (error) => {
        console.log(error);
      }
    )
  }


  onGetData(numberTab) {
    this.selectedItem = numberTab;
    this.spinner.show();
    this.tabsData = [];
    this.tabtype = numberTab;

    this.http.get(this.authSer.pathApi + '/forth_tabs_list/' + this.tabtype).subscribe(
      (responce) => {
        console.log(responce);
        this.tabsData = responce['tabs'];
        this.spinner.hide();
      },
      (error) => {
        console.log(error);
      }
    );
  }

  onExtraPage(reportId) {
    this.router.navigate(['InternalPage/news/' + reportId]);
  }

  open(data,i) {
    console.log(data);
    this.expandedIndex = i;
  }

  closeCollapse(i) {
    this.expandedIndex = -1;
  }

  goToHome() {
    this.router.navigate(['InternalPage']);
  }

  onPageCir() {
    this.router.navigate(['InternalPage/circulars']);
  }

  onLectureTable() {
    this.router.navigate(['InternalPage/events']);
  }

  showTabData(tab, typeTab) {
    console.log(tab);
    if(typeTab == 'wedding') {
      
      this.tabCongaData = {
        employee_name : tab.employee_name,
        employee_name_en: tab.employee_name_en,
        created_at: tab.created_at,
        name: tab.name,
        name_en: tab.name_en,

      };
      for(let i = 0 ; i < this.congratulations.length; i++) {
        if(this.congratulations[i].id == tab.id) {
          this.congratulations[i].active = 1;
        } else {
          this.congratulations[i].active = 0;
        }
      }
    } else if(typeTab == 'sad') {
      this.tabSadData = {
        employee_name : tab.employee_name,
        employee_name_en: tab.employee_name_en,
        created_at: tab.created_at,
        name: tab.name,
        name_en: tab.name_en
      };
      for(let i = 0 ; i < this.condolences.length; i++) {
        if(this.condolences[i].id == tab.id) {
          this.condolences[i].active = 1;
        } else {
          this.condolences[i].active = 0;
        }
      }
    }
    
  }

  showJoinData(join){
    this.joinTabData = {
      name : join.name,
      name_en: join.name_en,
      adminstration_name: join.adminstration_name,
      adminstration_name_en: join.adminstration_name,
      date_of_employment_hij: join.date_of_employment_hij,
      photo: join.photo,
    };
    for(let i = 0 ; i < this.joinUs.length; i++) {
      if(this.joinUs[i].id == join.id) {
        this.joinUs[i].active = 1;
      } else {
        this.joinUs[i].active = 0;
      }
    }
  }

  getAllNews() {
    this.router.navigate(['InternalPage/newpages/']);
  }

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




}