import { Component, inject, OnInit, signal } from '@angular/core';
import { RouterLink } from '@angular/router';
import { CommonModule } from '@angular/common';
import { firstValueFrom } from 'rxjs';

import { StationConfigService } from '../services/station-config.service';
import { UnderwriterService } from '../services/underwriter.service';
import { Underwriter } from '../interfaces/underwriter';
import { resolveImageUrl } from '../services/app-config.service';

@Component({
  selector: 'app-hero',
  standalone: true,
  imports: [RouterLink, CommonModule],
  templateUrl: './hero.component.html',
  styleUrl: './hero.component.scss',
})
export class HeroComponent implements OnInit {
  readonly config = inject(StationConfigService).config;
  private underwriterService = inject(UnderwriterService);

  readonly underwriters = signal<Underwriter[]>([]);
  readonly selectedUnderwriter = signal<Underwriter | null>(null);

  carouselPaused = false;

  ngOnInit(): void {
    this.loadUnderwriters();
  }

  async loadUnderwriters(): Promise<void> {
    try {
      const data = await firstValueFrom(this.underwriterService.getUnderwriters(true));
      this.underwriters.set(data);
    } catch {
      // Silently fail — carousel simply won't render
    }
  }

  resolveImageUrl(url: string): string {
    return resolveImageUrl(url);
  }

  pauseCarousel(): void {
    this.carouselPaused = true;
  }

  resumeCarousel(): void {
    this.carouselPaused = false;
  }

  openTakeover(uw: Underwriter): void {
    this.selectedUnderwriter.set(uw);
    this.carouselPaused = true;
  }

  closeTakeover(): void {
    this.selectedUnderwriter.set(null);
    this.carouselPaused = false;
  }

}