import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements AfterViewInit {

  @ViewChild('scrollBox', { static: false }) scrollBox!: ElementRef;
  @ViewChild('scrollPortatiles', { static: false }) scrollPortatiles!: ElementRef;
  @ViewChild('scrollCelulares', { static: false }) scrollCelulares!: ElementRef;


  maxScrollLeft = 0;

  ngAfterViewInit() {
    setTimeout(() => {
      this.maxScrollLeft = this.scrollPortatiles.nativeElement.scrollWidth - this.scrollPortatiles.nativeElement.clientWidth;
    }, 100); 
    setTimeout(() => {
      this.maxScrollLeft = this.scrollCelulares.nativeElement.scrollWidth - this.scrollCelulares.nativeElement.clientWidth;
    }, 100); 
  }

  scrollLeftPortatiles() {
    if (this.scrollPortatiles.nativeElement.scrollLeft <= 0) {
      this.scrollPortatiles.nativeElement.scrollTo({ left: this.maxScrollLeft, behavior: 'smooth' });
    } else {
      this.scrollPortatiles.nativeElement.scrollBy({ left: -277, behavior: 'smooth' });
    }
  }

  scrollRightPortatiles() {
    const scroll = this.scrollPortatiles.nativeElement;
    if (scroll.scrollLeft + scroll.clientWidth >= scroll.scrollWidth - 5) {
      scroll.scrollTo({ left: 0, behavior: 'smooth' });
    } else {
      scroll.scrollBy({ left: 277, behavior: 'smooth' });
    }
  }

  scrollLeftCelulares() {
    if (this.scrollCelulares.nativeElement.scrollLeft <= 0) {
      this.scrollCelulares.nativeElement.scrollTo({ left: this.maxScrollLeft, behavior: 'smooth' });
    } else {
      this.scrollCelulares.nativeElement.scrollBy({ left: -277, behavior: 'smooth' });
    }
  }

  scrollRightCelulares() {
    const scroll = this.scrollCelulares.nativeElement;
    if (scroll.scrollLeft + scroll.clientWidth >= scroll.scrollWidth - 5) {
      scroll.scrollTo({ left: 0, behavior: 'smooth' });
    } else {
      scroll.scrollBy({ left: 277, behavior: 'smooth' });
    }
  }

}
