<script>
  import TitleCard from "./TitleCard.svelte";

  /**
   * @typedef {object} Props
   * @property {any[]} titles
   * @property {Record<string|number, boolean>} expanded
   * @property {Record<string|number, boolean>} loadingChapters
   * @property {Record<string|number, any[]>} chaptersByTitle
   * @property {boolean} busy
   * @property {(titleId: number) => void | Promise<void>} onToggleExpand
   * @property {(titleId: number) => void | Promise<void>} onSync
   * @property {(title: any) => void | Promise<void>} onToggleEnabled
   * @property {(titleId: number) => void | Promise<void>} onRemove
   * @property {(chapterId: number, titleId: number) => void | Promise<void>} onCancelChapter
   * @property {(chapterId: number, titleId: number) => void | Promise<void>} onRedownload
   */

  /** @type {Props} */
  let {
    titles = [],
    expanded = {},
    loadingChapters = {},
    chaptersByTitle = {},
    busy = false,
    onToggleExpand,
    onSync,
    onToggleEnabled,
    onRemove,
    onCancelChapter,
    onRedownload,
  } = $props();
</script>

<section>
  <h2>Titles</h2>
  {#if titles.length === 0}
    <p class="muted">No titles yet. Add a series URL above.</p>
  {:else}
    {#each titles as title (title.id)}
      <TitleCard
        {title}
        expanded={Boolean(expanded[title.id])}
        loading={Boolean(loadingChapters[title.id])}
        chapters={chaptersByTitle[title.id] || []}
        {busy}
        onToggleExpand={() => onToggleExpand(title.id)}
        onSync={() => onSync(title.id)}
        onToggleEnabled={() => onToggleEnabled(title)}
        onRemove={() => onRemove(title.id)}
        {onCancelChapter}
        {onRedownload}
      />
    {/each}
  {/if}
</section>
