<script lang="ts">
	import {
		fillMissingDays,
		type ActivityHistoryEntry,
		activityHistory
	} from '$lib/AniList/activity';
	import { onMount } from 'svelte';
	import userIdentity from '../../stores/userIdentity';
	import {
		userIdentity as getUserIdentity,
		type AniListAuthorisation
	} from '$lib/AniList/identity';
	import { clearAllParameters } from './tool';

	export let user: AniListAuthorisation;
	export let activityData: ActivityHistoryEntry[] | null = null;

	let activityHistoryData: ActivityHistoryEntry[];
	let currentUserIdentity = { name: '', id: -1 };
	let baseHue = Math.floor(Math.random() * 360);

	onMount(async () => {
		clearAllParameters();

		if (user !== undefined) {
			if ($userIdentity === '') userIdentity.set(JSON.stringify(await getUserIdentity(user)));

			currentUserIdentity = JSON.parse($userIdentity);
			currentUserIdentity.name = currentUserIdentity.name;
			activityHistoryData = activityData || (await activityHistory(currentUserIdentity));
		}
	});

	const gradientColour = (amount: number, maxAmount: number, baseHue: number) => {
		const lightness = 100 - Math.round((amount / maxAmount) * 50);

		return `hsl(${baseHue}, 100%, ${lightness}%)`;
	};
</script>

{#if user === undefined}
	Please log in to view this page.
{:else if activityHistoryData === undefined}
	Loading activity history ... 50%
{:else}
	{@const filledActivities = fillMissingDays(activityHistoryData)}
	{@const highestActivity = Math.max(...filledActivities.map((activity) => activity.amount))}

	<div class="grid">
		{#each filledActivities as activity}
			<div
				class="grid-item"
				style="background-color: {gradientColour(activity.amount, highestActivity, baseHue)}"
				on:click={() => (baseHue = Math.floor(Math.random() * 360))}
				on:keydown={() => {
					return;
				}}
				role="button"
				tabindex="0"
				title={`Date: ${new Date(activity.date * 1000).toLocaleDateString()}\nAmount: ${
					activity.amount
				}`}
			/>
		{/each}
	</div>
{/if}

<style>
	.grid {
		display: grid;
		grid-template-columns: repeat(52, 1fr);
		grid-template-rows: repeat(7, 1fr);
		/* gap: 2px; */
		grid-auto-flow: column;
		width: min-content;
		background-color: white;
		border-radius: 3px;
		overflow: hidden;
	}
	.grid-item {
		width: 20px;
		height: 20px;
		/* width: 3.25vw; */
		/* height: 3.25vw; */
		/* border: 1px solid #ccc; */
	}
</style>
