<script lang="ts">
import tooltip from "$lib/Tooltip/tooltip";
import settings from "$stores/settings";
import NumberTicker from "$lib/Layout/NumberTicker.svelte";
import type { Title } from "./mediaTitle";

export let time: number | undefined = undefined;
export let count = -1337;
export let title: Title = {
	title: "Media List",
	hint: "This is a media list.",
};
export let progress: undefined | number = undefined;
export let hideTime = false;
export let hideCount = false;
</script>

<summary>
  <span class="list-title-text" title={title.hint || undefined} use:tooltip>{title.title}</span>
  {#if !hideCount}
    <span class="opaque list-title-count">
      {#if count === -1337}...{:else}<NumberTicker
          end={count}
          duration={Math.min(2500, Math.max(500, Math.abs(count) * 10))}
        />{/if}
    </span>
  {/if}
  {#if !hideTime && $settings.debugShowListTimings}
    {#if !hideCount}
      <span class="opaque list-title-separator">·</span>
    {/if}
    <small class="opaque list-title-time">{time ? time.toFixed(3) : '...'}s</small>
  {/if}
  <slot />
  {#if progress !== undefined}
    <button class="badge unclickable-button button-badge badge-info">
      {progress.toFixed(0)}%
    </button>
  {/if}
</summary>

<style>
  .list-title-text,
  .list-title-count,
  .list-title-separator,
  .list-title-time {
    vertical-align: middle;
  }

  .list-title-count {
    font-weight: normal;
  }

  .list-title-separator {
    font-weight: normal;
  }
</style>
