import { SiteService } from './../../../../../core/services/site/site.service';
import { SITES } from './../../../../../core/mocks/data';
import { Site } from 'src/app/core/interfaces/site/site';
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';
import { environment } from 'src/environments/environment';
@Component({
  selector: 'app-list-sites',
  templateUrl: './list-sites.component.html',
  styleUrls: ['./list-sites.component.scss'],
})
export class ListSitesComponent implements OnInit {
  //@Input() sites!: Site[];
  @Output() emitAllyId = new EventEmitter();


  url = environment.BASE_URL_API;
  sites: Site[] = SITES;
  nextPage: string | null = null;
  previousPage: string | null = null;
  actualPage = environment.BASE_URL_API+'/allys/';

  numberPages = [1, 2, 3, 4, 5, 6];
  pageSelect = 0;
  pageMax = 0;
  pageMaxInSlide = 0;

  constructor(private siteService: SiteService) {}

  ngOnInit() {
    this.getSites();
  }

  getSites(){
    this.siteService.getSitesWithPagination(this.pageSelect+1).subscribe(
      (data) => {
        this.sites = data.results;
        this.pageMaxInSlide = Math.ceil(data.count/2)  < 6 ? Math.ceil(data.count/2) : 6;
        this.pageMax = Math.ceil(data.count/2) ;
        this.numberPages = [];
        for(let i=1; i <= this.pageMaxInSlide; i++ ){
          this.numberPages.push(i);
        }
      },
      (error) => {
        console.log(error);
      }
    )
  }

  handlePatternAllyId($event: number) {
    this.emitAllyId.emit($event);
  }

  avanzar() {
    if (this.pageSelect == this.pageMaxInSlide && this.numberPages[5] == this.pageMax) {
      return;
    } else {
      if (this.pageSelect == this.pageMaxInSlide) {
        this.numberPages = this.numberPages.map(function (val) {
          return ++val;
        });
      } else {
        this.pageSelect += 1;
      }
    }
    this.getSites();
  }

  retroceder() {
    if (this.pageSelect == 0 && this.numberPages[0] == 1) {
      return;
    } else {
      if (this.pageSelect == 0) {
        this.numberPages = this.numberPages.map(function (val) {
          return --val;
        });
      } else {
        this.pageSelect -= 1;
      }
    }
    this.getSites();
  }

  newPage(index: number) {
    this.pageSelect = index;
    this.getSites();
  }
}