<script lang="ts">
import type { Media } from "$lib/Data/AniList/media";
import type { MediaPrequel } from "$lib/Data/AniList/prequels";
import tooltip from "$lib/Tooltip/tooltip";
import airingNow from "$stores/airingNow";
import locale from "$stores/locale";
import settings from "$stores/settings";
import { formatCountdown } from "./format";

export let originalAnime: Media;
export let upcoming = false;

const anime = originalAnime;
let opacity = 100;
let timeFrame = "";
let time = "";
let nextEpisode = anime.nextAiringEpisode?.episode || 0;
let few = true;
let dateString = "";
const setAiringTime = () => {
	time = "";
	timeFrame = "";
	dateString = "";

	const airingAt = anime.nextAiringEpisode?.airingAt;
	const untilAiring = airingAt
		? Math.round((airingAt - $airingNow / 1000) * 100) / 100
		: undefined;

	time = new Date(airingAt ? airingAt * 1000 : 0).toLocaleTimeString([], {
		hour12: !$settings.display24HourTime,
		hour: "numeric",
		minute: "2-digit",
	});

	if (
		(anime as unknown as MediaPrequel).startDate &&
		new Date(
			anime.startDate.year,
			(anime as unknown as MediaPrequel).startDate.month,
			(anime as unknown as MediaPrequel).startDate.day,
		) < new Date()
	)
		return `<span class="opaque">on ${new Date(
			anime.startDate.year,
			(anime as unknown as MediaPrequel).startDate.month,
			(anime as unknown as MediaPrequel).startDate.day,
		).toLocaleDateString()}</span>`;

	if (untilAiring !== undefined) {
		const formatted = formatCountdown(untilAiring);

		timeFrame = formatted.text;
		few = formatted.few;
		opacity = Math.max(50, 100 - (untilAiring / 60 / 60 / 24 / 7) * 50);
		dateString = $locale().dateFormatter(
			new Date(airingAt ? airingAt * 1000 : 0),
		);
	}
};

$: {
	$airingNow;

	setAiringTime();
}
</script>

{#if upcoming}
  <span title={dateString} use:tooltip style={`opacity: ${opacity}%;`}>
    {nextEpisode}{#if anime.episodes !== null}<span class="opaque">/{anime.episodes}</span>
    {/if} in {timeFrame}
    <span class="opaque">
      {#if few && $settings.displayCoverModeAnime}<br />{/if}{few ? `(${time})` : ''}
    </span>
  </span>
{:else}
  <span title={dateString} use:tooltip style={`opacity: ${opacity}%;`}>
    {nextEpisode} in {#if few && $settings.displayCoverModeAnime}<br />{/if}{#if few}<b>
        {timeFrame}
      </b>{:else}{timeFrame}{/if}
    {few ? `(${time})` : ''}
  </span>
{/if}
