import { CmsComponentData } from '@spartacus/storefront';
import { Component, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
import { CarouselComponentData, CarouselDataInterface } from './carousel.model';
import { of, Subscription } from 'rxjs';
import { TeaserComponentData } from '../../converter/teaser/fs-teaser.model';
import { nullSafe } from 'fs-spartacus-common';


/**
 * This component shows teasers in a carousel.
 *
 * @export
 * @class CarouselComponent
 */
@Component({
    selector: 'fs-carousel',
    templateUrl: './carousel.component.html',
    styleUrls: ['./carousel.component.scss'],
    standalone: false
})
export class CarouselComponent implements OnDestroy {
  carouselData: CarouselDataInterface = null;
  sub$: Subscription;

  constructor(
    public componentData: CmsComponentData<CarouselComponentData>,
    private changeDetectorRef: ChangeDetectorRef,
    private ngZone: NgZone
  ) {
    this.sub$ = this.componentData.data$.subscribe((data) => {
      this.ngZone.runTask(() => {
        const { carouselElements: teaserElements, ...carouselComponentData } = nullSafe(data, {});
        this.carouselData = Object.assign(
          {},
          {
            ...carouselComponentData,
            carouselElements: of(
              teaserElements?.map((carouselElement, index) => {
                const teaserComponentData: CmsComponentData<TeaserComponentData> = {
                  data$: of({
                    ...carouselElement,
                    previewId: `${carouselComponentData.previewId}/st_carouselItems/${index}`
                  }),
                  uid: carouselElement?.typeCode,
                };
                return of(teaserComponentData);
              })
            ),
          }
        );
        this.changeDetectorRef.markForCheck();
      });
    });
  }

  ngOnDestroy(): void {
    if (this.sub$) {
      this.sub$.unsubscribe();
    }
  }
}