import {Component, inject} from '@angular/core';
import {ShowListComponent} from '../show-list/show-list.component';
import {Show} from '../../model/show';
import {ShowService} from '../../services/show.service';
import {ShowFormComponent} from '../show-form/show-form.component';
import {BehaviorSubject} from 'rxjs';
import {ApiService} from '../../services/api-service';
import {ShowDetailsComponent} from '../show-details/show-details.component';

@Component({
  selector: 'app-main-view',
  standalone: true,
  imports: [
    ShowListComponent,
    ShowFormComponent,
    ShowDetailsComponent
  ],
  templateUrl: './main-view.component.html',
  styleUrl: './main-view.component.css'
})
export class MainViewComponent {
  private dataService: ShowService = inject(ShowService);
  private apiService: ApiService = inject(ApiService);

  public shows: Show[] = [];
  selectedShow$: BehaviorSubject<Show>;
  isShowSelected = false;

  constructor() {
    this.shows = this.dataService.getShows();
    this.selectedShow$ = new BehaviorSubject<Show>(new Show(0, ""))
  }

  onSelectedShow(show: Show) {
    const title = show.title ?? '';
    this.apiService.getDetailShow(title).subscribe((s) => {
      this.selectedShow$.next(s);
    });
    this.isShowSelected = true;
  }
}