import { Component, inject } from '@angular/core';
import { AsyncPipe, DatePipe, NgFor } from '@angular/common';
import { map, Observable, startWith } from 'rxjs';

import { EventService } from '../services/event.service';
import { StationConfigService } from '../services/station-config.service';
import { Event } from '../interfaces/event';

interface EventsState {
  loading: boolean;
  upcomingEvents: Event[];
}

@Component({
  selector: 'app-events',
  standalone: true,
  imports: [AsyncPipe, DatePipe, NgFor],
  templateUrl: './events.component.html',
  styleUrl: './events.component.scss',
})
export class EventsComponent {
  private eventService = inject(EventService);
  readonly config = inject(StationConfigService).config;

  /** Async pipe drives the template — guarantees change detection on every emission. */
  readonly events$: Observable<EventsState> =
    this.eventService.getEvents(true).pipe(
      map((upcomingEvents) => ({ loading: false, upcomingEvents })),
      startWith({ loading: true, upcomingEvents: [] }),
    );
}