import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { EventConfig, HeroConfig } from '../../../core/services/tenant.interface';
import { ButtonComponent } from '../button/button.component';
import { TooltipComponent } from '../tooltip/tooltip.component';

@Component({
  selector: 'app-hero-banner',
  standalone: true,
  imports: [CommonModule, RouterModule, ButtonComponent, TooltipComponent],
  templateUrl: './hero-banner.component.html',
  styleUrl: './hero-banner.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeroBannerComponent {
  @Input() heroConfig?: HeroConfig | null;
  @Input() eventConfig?: EventConfig | null;

  protected schedulesExpanded = false;

  protected get desktopImageUrl(): string | null {
    const image = this.heroConfig?.background_image_id;

    return typeof image === 'string' ? image : (image?.desktop ?? null);
  }

  protected get mobileImageUrl(): string | null {
    const image = this.heroConfig?.background_image_id;

    return typeof image === 'string' ? image : (image?.mobile ?? image?.desktop ?? null);
  }

  get formattedDates(): string {
    if (this.eventConfig?.dates_text) {
      return this.eventConfig.dates_text;
    }

    if (!this.eventConfig?.dates || this.eventConfig.dates.length === 0) {
      return '';
    }

    return this.eventConfig.dates.map(({ date }) => date).join(', ');
  }

  protected toggleSchedules(): void {
    this.schedulesExpanded = !this.schedulesExpanded;
  }

  protected formatScheduleDate(date: string): string {
    const [year, month, day] = date.split('-').map(Number);

    if (!year || !month || !day) {
      return date;
    }

    const monthName = new Intl.DateTimeFormat('es-AR', {
      month: 'long',
      timeZone: 'UTC',
    }).format(new Date(Date.UTC(year, month - 1, day)));
    const capitalizedMonth = `${monthName.charAt(0).toUpperCase()}${monthName.slice(1)}`;

    return `${day} de ${capitalizedMonth} ${year}`;
  }

  protected formatScheduleTime(time: string): string {
    return time.match(/^\d{2}:\d{2}/)?.[0] ?? time;
  }
}