import {
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  Input,
  isDevMode,
  OnInit,
  TemplateRef,
  OnDestroy,
  ChangeDetectorRef,
  OnChanges,
} from '@angular/core';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { ICON_TYPE } from '@spartacus/storefront';
import { CarouselService } from './carousel.service';

/**
 * Generic carousel component that can be used to render any carousel items,
 * such as products, images, banners, or any component. Carousel items are
 * rendered in so-called carousel slides, and the previous/next buttons as well as
 * the indicator-buttons can used to navigate the slides.
 *
 * The component uses an array of Observables (`items$`) as an input, to allow
 * for lazy loading of items.
 *
 * The number of items per slide is calculated with the `itemWidth`, which can given
 * in pixels or percentage.
 *
 * To allow for flexible rendering of items, the rendering is delegated to the
 * given `template`. This allows for maximum flexibility.
 */
@Component({
    selector: 'cx-carousel',
    templateUrl: './carousel.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: false
})
export class CarouselComponent implements OnInit, OnDestroy, OnChanges {
  /**
   * The title is rendered as the carousel heading.
   */
  @Input() title: string;

  /**
   * The items$ represent the carousel items. The items$ are
   * observables so that the items can be loaded on demand.
   */
  items: Array<Observable<any>>;
  // eslint-disable-next-line @angular-eslint/no-input-rename
  @Input('items')
  set setItems(inputItems: Array<Observable<any>>) {
    this.items = inputItems;
    // Reset slider when changing products
    this.activeSlide = 0;
  }

  /**
   * The template is rendered for each item, so that the actual
   * view can be given by the compoent that uses the `CarouselComponent`.
   */
  @Input() template: TemplateRef<any>;

  /**
   * Specifies the minimum size of the carousel item, either in px or %.
   * This value is used for the calculation of numbers per carousel, so that
   * the number of carousel items is dynamic. The calculation uses the `itemWidth`
   * and the host element `clientWidth`, so that the carousel is reusable in
   * different layouts (for example in a 50% grid).
   */
  @Input() itemWidth = '300px';

  /**
   * Indicates whether the visual indicators are used.
   */
  @Input() hideIndicators = false;

  @Input() indicatorIcon = ICON_TYPE.CIRCLE;

  /**
   * Navigation configuration
   */
  @Input() previousIcon = ICON_TYPE.CARET_LEFT;
  @Input() nextIcon = ICON_TYPE.CARET_RIGHT;
  @Input() hideNavigation = false;

  /**
   * Autocycle configuration
   * Autocycle on is default, interval 5000ms
   */

  @Input() autocycleOn = true;
  @Input() autocycleInterval = 5000;

  activeSlide: number;
  size$: Observable<number>;

  autocycleIntervalId: any; // variable to clear autocycle interval
  size = 0;

  constructor(protected el: ElementRef, protected service: CarouselService, private changeDetectorRef: ChangeDetectorRef) {}

  ngOnInit() {
    if (!this.template && isDevMode()) {
      console.error('No template reference provided to render the carousel items for the `cx-carousel`');
      return;
    }
    this.size$ = this.service.getItemsPerSlide(this.el.nativeElement, this.itemWidth).pipe(
      tap((calculatedSize: number) => {
        this.activeSlide = 0;
        this.size = calculatedSize;
      })
    );
  }

  ngOnChanges() {
    clearInterval(this.autocycleIntervalId);
    if (this.autocycleOn === true) {
      this.autocycle();
    }
  }

  nextSlide() {
    if (this.activeSlide < this.items.length - 1) {
      this.activeSlide += this.size;
    } else this.activeSlide = 0;
  }

  previousSlide() {
    if (this.activeSlide > 0) {
      this.activeSlide -= this.size;
    } else this.activeSlide = this.items.length - 1;
  }

  autocycle() {
    this.autocycleIntervalId = setInterval(() => {
      this.nextSlide();
      this.changeDetectorRef.detectChanges();
    }, this.autocycleInterval);
  }

  ngOnDestroy() {
    clearInterval(this.autocycleIntervalId);
  }
}