import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CarouselUpdateEventDetail, PorscheDesignSystemModule } from '@porsche-design-system/components-angular';

@Component({
  selector: 'porsche-design-system-app',
  template: `
    <p-carousel [heading]="'Some Heading'" [activeSlideIndex]="activeSlideIndex" (update)="onUpdate($event)">
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </p-carousel>

    <div class="flex gap-fluid-sm mt-fluid-sm">
    @for (_ of [].constructor(3); track _; let i = $index) {
      <p-button
        type="button"
        (click)="onButtonClick($event)"
        [disabled]="activeSlideIndex === i"
        >
        {{ i + 1 }}
      </p-button>
    }
    </div>
    `,
  styles: `
    p-carousel div {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #00b0f4;
      height: 150px;
      color: #000;
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [PorscheDesignSystemModule],
})
export class ExampleComponent {
  activeSlideIndex = 1;

  onUpdate(e: CustomEvent<CarouselUpdateEventDetail>) {
    this.activeSlideIndex = e.detail.activeIndex;
  }
  onButtonClick(e: MouseEvent) {
    this.activeSlideIndex = parseInt((e.target as HTMLButtonElement).innerText) - 1;
  }
}