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

	export let user: AniListAuthorisation;

	let activityHistoryData: Promise<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 = activityHistory(currentUserIdentity);
		}
	});

	// const incrementDate = (date: Date): Date => {
	// 	date.setDate(date.getDate() + 1);

	// 	return date;
	// };

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

		return `hsl(${baseHue}, 100%, ${lightness}%)`;
	};

	const screenshot = async () => {
		let element = document.querySelector('.grid') as HTMLElement;

		if (element !== null) {
			domToBlob(element, {
				quality: 1,
				scale: 2
			}).then((blob) => {
				const downloadWrapper = document.createElement('a');
				const image = document.createElement('img');
				const object = (window.URL || window.webkitURL || window || {}).createObjectURL(blob);

				downloadWrapper.href = object;
				downloadWrapper.target = '_blank';
				image.src = object;

				downloadWrapper.appendChild(image);

				const gridFinal = document.getElementById('grid-final');

				if (gridFinal !== null) {
					gridFinal.innerHTML = '';

					gridFinal.appendChild(downloadWrapper);
				}

				downloadWrapper.click();
			});
		}
	};
</script>

<blockquote>
	Days in risk of developing an activity history hole. (days with one activity)
</blockquote>

{#if user === undefined}
	Please log in to view this page.
{:else}
	{#await activityHistoryData}
		Loading ...
	{:then activities}
		{#if activities === undefined}
			Loading ...
		{:else}
			{@const highestActivity = Math.max(...activities.map((activity) => activity.amount))}

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

			<p />

			<div id="grid-final" />

			<p />

			<p><a href={'#'} on:click={screenshot}>Generate grid image</a></p>

			<ul>
				{#each fillMissingDays(activities) as activity}
					{#if activity.amount === 0}
						<li>
							{new Date(
								activity.date * 1000 + new Date().getTimezoneOffset() * 60 * 1000
							).toDateString()}
						</li>
					{/if}
				{/each}
			</ul>
		{/if}
	{/await}
{/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;
	}
	.grid-item {
		width: 20px;
		height: 20px;
		/* width: 3.25vw; */
		/* height: 3.25vw; */
		/* border: 1px solid #ccc; */
	}
</style>
