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;

  maxScrollLeft = 0;

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

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

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