import { NgxSpinnerService } from 'ngx-spinner';
import { AuthServiceService } from './../../shared/auth-service.service';
import { ExternalPageService } from './../../shared/external-page.service';
import { ActivatedRoute, Params } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-external-hospital',
  templateUrl: './external-hospital.component.html',
  styleUrls: ['./external-hospital.component.css']
})
export class ExternalHospitalComponent implements OnInit {

  // customOptions: any = {
  //   loop: true,
  //   mouseDrag: false,
  //   touchDrag: false,
  //   pullDrag: false,
  //   dots: false,
  //   navSpeed: 700,
  //   navText: [ '<i class="fa-chevron-left"></i>', '<i class="fa-chevron-right></i>"' ],
  //   responsive: {
  //     0: {
  //       items: 1
  //     },
  //     400: {
  //       items: 2
  //     },
  //     740: {
  //       items: 3
  //     },
  //     940: {
  //       items: 4
  //     }
  //   },
  //   nav: true
  // }

  // slidesStore=[];

 

  number: number = 1;
  numberWidth:number = 6;


  typePage: string = '';
  
  data = [];

  detailsField = {
    title_en: '',
    title: '',
    description: '',
    description_en: '',
  }



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

  ngOnInit() {
    
    this.authSer.homeActivate = false;
    // //catch params type from URL
    // this.route.params.subscribe(
    //   (params:Params) => {
    //     this.typePage = params['type_page'];
    //   }
    // );
   
    // this.slidesStore = [
    //   {src: '../../../assets/image/avatar.png', alt: 'title', title: 'title' , id: 1},
    //   {src: '../../../assets/image/avatar.png', alt: 'title', title: 'title', id: 2},
    //   {src: '../../../assets/image/avatar.png', alt: 'title', title: 'title', id: 3},
    //   {src: '../../../assets/image/avatar.png', alt: 'title', title: 'title', id: 4}
    // ];

    //get hospital or managaments data 

      //to add class active if hospital route activate
      this.externalService.getHospitalMangamentsData('hospital').subscribe(
        (responce) => {
          console.log(responce);
          this.data = responce['hospitals_centers'];
          console.log('data hospital', this.data);
          this.showDescriptionDetails(this.data[0].fields[0]);
          this.spinner.hide();
        },
        (error) => {
          console.log(error);
        }
      );

      this.externalService.getHeader().subscribe(
        (responce) => {
          this.externalService.headerMenus = responce['parents'];
          for(let i = 0; i < this.externalService.headerMenus.length; i++) {
            if(this.externalService.headerMenus[i].id == 19) {
              this.externalService.headerMenus[i].active = 1;
            } else {
              this.externalService.headerMenus[i].active = 0;
            }
          }
          this.spinner.hide();
        },
        (error) => {
          console.log(error);
        }
      );
  }

   //show data of filed if click
   showDescriptionDetails(fieldData) {
    console.log(fieldData);
    this.detailsField = {
      title: fieldData.title,
      title_en: fieldData.title_en,
      description: fieldData.description,
      description_en: fieldData.description_en,
    }
    console.log(this.detailsField);
  };

  customOptions: any = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1
      },
      400: {
        items: 2
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      }
    },
    nav: true
  }

  
  
}