import { AsyncPipe, CurrencyPipe, NgClass } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { BehaviorSubject, map } from 'rxjs';
import { TimePerTourMetric } from '../../../../core/data-access/graphql/generated/generated';
import { DashboardViewType, DiagrammType } from '../../types';
import { summarizeMetrics } from '../../util/summarize-metrics';

@Component({
  selector: 'dks-view-type-selector',
  imports: [
    NgClass,
    AsyncPipe,
    CurrencyPipe,
    MatIconModule,
    MatCardModule
],
  templateUrl: './view-type-selector.component.html',
  styleUrls: ['./view-type-selector.component.css'],
})
export class ViewTypeSelectorComponent {
  @Input() viewType!: DashboardViewType;
  @Input() currentMetric!: DiagrammType;
  @Input() selected = false;
  @Input() set metrics(metrics: TimePerTourMetric[]) {
    this.metrics$.next(metrics);
  }
  @Output() viewTypeSelected = new EventEmitter<void>();

  private metrics$ = new BehaviorSubject<TimePerTourMetric[]>([]);
  metricSummary$ = this.metrics$.pipe(
    map((metrics) => summarizeMetrics(metrics))
  );
  DiagrammType = DiagrammType;

  setSelectedViewType(): void {
    this.viewTypeSelected.emit();
  }

  calculateIndex(metric: TimePerTourMetric): number {
    return Math.floor((metric.availableTime / metric.tourAmount) * 100) / 100;
  }
}
