---
import SectionContainer from '../../components/SectionContainer.astro';
import watched from '../../data/watched.json'

const tvByYear = watched.reduce((acc:any, tv) => {
    const year = new Date(tv.date.string).getFullYear();
    if (!acc[year]) {
        acc[year] = [];
    }
    acc[year].push(tv);
    return acc;
}, {});

const sortedYears = Object.keys(tvByYear).sort((a:any, b:any) => b - a);

/*
function getEmojiStars(rating:any) {
    let stars = '';
    for (let i = 0; i < rating; i++) {
        stars += '⭐';
    }
    return stars;
}
*/

function getHeartEmoji(rating:any) {
  let heart = '';
  if (rating == 5) heart = "❤️";
  return heart;
}

const today = new Date();
---
<SectionContainer>
    <main class="flex flex-col gap-4 mt-4">
		<h1 class="text-3xl font-extrabold">📺 La télévision</h1>
		<h2 class="text-xl font-semibold">{today.getFullYear()} - Currently Watching:</h2>
        <p>👀 ONE PIECE Egghead Arc</p>
        <p>👀 Star Wars: The Clone Wars S04</p>
        {sortedYears.map(year => (
            <section>
                <div class="flex items-center gap-2 text-xl font-semibold mb-2">{year} - Finished <p class="text-xs">({tvByYear[year].length} entries)</p></div>
                <ul>
                    {
                        tvByYear[year].map(tv => (
                            <li class="flex mb-2 break-words gap-2 borderbottom">
                                <p class="text-s w-1/3">{tv.title}</p>
                                <p class="w-1/3 text-center">{tv.type}</p>
                                <p class="w-1/3 text-end">{getHeartEmoji(tv.my_rating)}</p>
                            </li>
                        ))
                    }
                </ul>
            </section>
        ))}
	</main>
</SectionContainer>