import { ChangeDetectionStrategy, Component } from '@angular/core';
import { DialogService } from '@ngneat/dialog';
import { map } from 'rxjs';

import { AnomaliesService } from '../anomalies.service';
import { TourViewDialogComponent } from './tour-view-dialog/tour-view-dialog.component';
import { Tour } from '../../../core/data-access/graphql/generated/generated';

@Component({
    selector: 'dks-upcoming-tours',
    templateUrl: './upcoming-tours.component.html',
    styleUrls: ['./upcoming-tours.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: false
})
export class UpcomingToursComponent {
  upcomingTours$;

  constructor(
    private readonly anomaliesService: AnomaliesService,
    private readonly diaolog: DialogService
  ) {
    this.upcomingTours$ = this.anomaliesService.upcomingTours$.pipe(
      map((result) => result.data.upcomingTours),
      map((tours) =>
        tours
          .map((tour) => ({
            ...tour,
            colorClass:
              new Date(tour.startDate).getTime() - new Date().getTime() >
              10 * 60 * 1000
                ? 'bg-yellow-500'
                : 'bg-red-500',
          }))
          .sort(
            ({ startDate: startDateA }, { startDate: startDateB }) =>
              new Date(startDateA).getTime() - new Date(startDateB).getTime()
          )
      )
    );
  }

  openTourViewDialog(tour: Partial<Tour>) {
    this.diaolog.open(TourViewDialogComponent, {
      data: tour,
    });
  }
}
