<script lang="ts">
	import crunchyroll from '$lib/crunchyroll.json';
	import { onMount } from 'svelte';

	const days = crunchyroll
		.filter((media) => media.day !== 'soon' && media.day !== 'continuing')
		.reduce((acc, media) => {
			const date = new Date(media.year, media.month - 1, media.day).toLocaleDateString();
			if (!acc[date]) {
				acc[date] = [];
			}
			acc[date].push(media);
			return acc;
		}, {});
	const continuing = crunchyroll.filter((media) => media.day === 'continuing');
	const soon = crunchyroll.filter((media) => media.day === 'soon');

	const ordinalSuffix = (i: number) => {
		const j = i % 10;
		const k = i % 100;

		if (j === 1 && k !== 11) return i + 'st';
		if (j === 2 && k !== 12) return i + 'nd';
		if (j === 3 && k !== 13) return i + 'rd';

		return i + 'th';
	};
</script>

{#each Object.values(days) as day}
	{@const date = new Date(day[0].year, day[0].month - 1, day[0].day)}

	{date.toLocaleString('default', { month: 'long' })}
	{ordinalSuffix(day[0].day)}, {day[0].year}
	<ul>
		{#each day as media}
			<li>{media.title}</li>
		{/each}
	</ul>
{/each}

Coming soon
<ul>
	{#each soon as media}
		<li>{media.title}</li>
	{/each}
</ul>

Continuing from previous season
<ul>
	{#each continuing as media}
		<li>{media.title}</li>
	{/each}
</ul>
