import {
  AfterViewInit,
  Component,
  ElementRef,
  Input,
  QueryList,
  ViewChild,
  ViewChildren
} from '@angular/core';
import { CarouselItem } from '../carousel-item';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'bulma-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.scss']
})
export class CarouselComponent implements AfterViewInit {
  @Input() public items!: CarouselItem[];
  @Input() public initialSlide = 0;
  @Input() public slidesToScroll = 1;
  @Input() public slidesToShow = 1;
  @Input() public navigation = true;
  @Input() public navigationSwipe = true;
  @Input() public pagination = true;
  @Input() public loop = true;
  @Input() public infinite = true;
  @Input() public effect = 'translate';
  @Input() public duration = 300;
  @Input() public timing = 'ease';
  @Input() public autoplay = false;
  @Input() public autoplaySpeed = 3000;
  @Input() public pauseOnHover = true;

  @ViewChild('sliderContainer', { read: ElementRef }) container!: ElementRef;
  @ViewChildren('slideItem', { read: ElementRef })
  slideItems!: QueryList<ElementRef>;

  public activeItem = 0;

  constructor() {}

  ngAfterViewInit(): void {
    return;
  }
}
