import { Component, OnInit, ViewChild, ElementRef, Renderer2 } 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 {

  @ViewChild('scrollContent') scrollContent: ElementRef

  public basePath = `${environment.BASE_PATH}`

  public homeItems: any = []
  public section: string = 'portfolio'
  public paused: boolean = false
  private scrollPos: number = 0

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

  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)
    })
  }

  ngAfterViewInit() {
    setInterval( () => {
      console.log(this.paused)
      if(!this.paused) {
        const scrollWidth = 300
        const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0
        /*
        switch(dir) {
          case 'prev':
            this.scrollPos = scrollPos + scrollWidth >= 0 ? 0 : scrollPos + scrollWidth
            break;
          case 'next':*/
            this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ?
                              -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth
        /*
            break;
        }*/
        this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px'
      }
    },2000)
  }

  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
  }

  scroll(dir): void {
    const scrollWidth = document.body.clientWidth / 3
    const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0
    this.paused = true

    switch(dir) {
      case 'prev':
        this.scrollPos = scrollPos + scrollWidth >= 0 ? 0 : scrollPos + scrollWidth
        break;
      case 'next':
        this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ?
                          -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth
        break;
    }
    this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px'
  }

}