import { Component, OnInit } from '@angular/core'
import { Router, NavigationEnd } from '@angular/router'
import { ApisService } from '../services/apis.service'
import { environment } from '../../environments/environment'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  public basePath = `${environment.BASE_PATH}`

  public homeItems: any = []
  public section: string = 'portfolio'

  constructor(
    private apisService: ApisService,
    private router: Router)
  { }

  ngOnInit(): void {
    this.apisService.getPortfolio(this.section, true).toPromise().then((response) => {
      this.homeItems = response.items

      let cnt = 0
      let width = 0
      let tot = 0

      this.homeItems.forEach((e) => {
        e.loading = true
        e.width = Math.floor(Math.random()*4)+1
        cnt++
      })

    },(error) => {
      console.error('getPortfolio ERROR', error)
    }).catch((e) => {
      console.error('getPortfolio CATCH', e)
    })
  }

  showDetails(id): void {
    const section = this.section == 'exhibitions' ? 'exhibitions' : 'works'
    this.router.navigate([`/detail/${section}/${id}`])
  }

  onLoad(id): void {
    this.homeItems.filter(item => item.id == id)[0].loading = false
  }

}