frontend/src/app/movie-importer/movie-importer.component.ts

import { LoadingService } from './../loading.service';
import { Component, inject } from '@angular/core';
import { FormControl } from '@angular/forms';
import { catchError, finalize, of, tap } from 'rxjs';
import { HttpService } from '../http.service';
import { OmdbMovie } from '@infinimotion/model-frontend';

@Component({
  selector: 'app-movie-importer',
  standalone: false,
  templateUrl: './movie-importer.component.html',
  styleUrl: './movie-importer.component.css'
})
export class MovieImporterComponent {
  formControl = new FormControl('')

  movies: OmdbMovie[] = [];
  search_query: string = '';
  showAll = false;
  isSearching = false;

  private httpService = inject(HttpService)
  public loadingService = inject(LoadingService)

  DoSubmit() {
    this.showAll = false;
    this.searchForMovies();
  }

  searchForMovies() {
    this.search_query = this.formControl.value?.trim() || '';
    if (this.search_query?.length == 0) return;

    this.isSearching = true;
    this.formControl.disable();
    this.loadingService.show();

    this.httpService.searchMovie(this.search_query).pipe(
      tap(movies => {
        this.movies = movies.search || [] ;
        this.loadingService.hide();
      }),
      catchError(err => {
        this.loadingService.showError(err);
        console.error('Fehler bei der Suchen', err);
        return of([]);
      }),
      finalize(() => {
        this.isSearching = false;
        this.formControl.enable();
      })
    ).subscribe();
  }

  toggleShowAll() {
    this.showAll = !this.showAll;
  }
}