import { Component, inject, input } from '@angular/core';
import { ComicComicsListComponent } from "../comic-comics-list/comic-comics-list.component";
import { ComicDetails } from '../comic.model';
import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
import { ComicService } from './comic.service';
import { ComicWorktypeComponent } from '../comic-worktype/comic-worktype.component';
import { ComicArtistComponent } from '../comic-artist/comic-artist.component';
import { ComicIssueComponent } from '../comic-issue/comic-issue.component';
import { ComicPublisherComponent } from "../comic-publisher/comic-publisher.component";

@Component({
  selector: 'app-comic-comics',
  imports: [ComicComicsListComponent, ComicWorktypeComponent, ComicArtistComponent, ComicIssueComponent, ComicPublisherComponent],
  templateUrl: './comic-comics.component.html',
  styleUrl: './comic-comics.component.css'
})
export class ComicComicsComponent {
  comic = input.required<ComicDetails>();
}

export const comicResolver: ResolveFn<ComicDetails> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
  const comicService = inject(ComicService);
  const comicId = route.paramMap.get('comicId');
  const comicDetails = comicService.loadComicDetails(comicId);
  console.log(comicDetails);
  return comicDetails;
};
