<script lang="ts">
	import {
		type Application,
		type ApplicationEvent,
		EventType
	} from '$lib/ApplicationsStore.svelte';
	import { statusStore } from '$lib/Types.svelte';

	let { application }: { application: Application } = $props();

	let events: (ApplicationEvent & { timeDiff: string })[] = $state([]);

	function calcDiff(time: number): string {
		// millis to secs
		time = Math.floor(time / 1000);

		const days = Math.floor(time / (24 * 60 * 60));
		if (days == 1) {
			return '1 Day';
		} else if (days > 0) {
			return `${days} Days`;
		}

		time = time % (24 * 60 * 60);

		const hours = Math.floor(time / (60 * 60));
		if (hours > 20) {
			return '1 Day';
		} else if (hours > 2) {
			return `${hours} Hours`;
		}

		return '';
	}

	$effect(() => {
		let lastEvent: ApplicationEvent | undefined = undefined;

		let _events: typeof events = [];

		for (let event of application.events) {
			let time = '';
			if (lastEvent) {
				let d1 = new Date(lastEvent.time).getTime();
				let d2 = new Date(event.time).getTime();
				time = calcDiff(d2 - d1);
			}

			if (lastEvent) {
				let d1 = new Date(lastEvent.time).getTime();
				let d2 = new Date(event.time).getTime();
				time = calcDiff(d2 - d1);
			}

			if (time) {
				_events[_events.length - 1].timeDiff = time;
			}

			_events.push({ ...event, timeDiff: '' });
			lastEvent = event;
		}

		let d2 = new Date().getTime();
		if (_events.length > 0) {
			let d1 = new Date(_events[_events.length - 1].time).getTime();
			_events[_events.length - 1].timeDiff = calcDiff(d2 - d1);
		}

		// Todo endable
		/*
		if (_events.length > 0 && !endable.includes(_events[_events.length - 1].new_status_id)) {
			let d1 = new Date(_events[_events.length - 1].time).getTime();
			let d2 = new Date().getTime();
			_events[_events.length - 1].timeDiff = calcDiff(d2 - d1);
		}
		*/

		events = _events;
	});
</script>

{#if events.length > 0}
	<div class="overflow-x-auto">
		<div class="flex p-5 items-center">
			{#each events as event, i}
				{#if i === 0 && event.event_type !== EventType.Creation}
					<div class="min-w-[70px] h-[15px] bg-blue-500 -mx-[10px]"></div>
				{/if}

				<div
					class="shadow-sm shadow-violet-500 border rounded-full min-w-[50px] min-h-[50px] grid place-items-center bg-white z-10"
				>
					{#if event.event_type == EventType.Creation}
						<span title={`Created @\n ${new Date(event.time).toLocaleString()}`} class="bi bi-plus"
						></span>
					{:else if event.event_type == EventType.View}
						<span title={`Viewed @\n ${new Date(event.time).toLocaleString()}`} class="bi bi-eye"
						></span>
					{:else}
						<span
							title={`${statusStore.nodesR[event.new_status_id].name}\n${new Date(
								event.time
							).toLocaleString()}`}
							class="bi bi-{statusStore.nodesR[event.new_status_id].icon}"
						></span>
					{/if}
				</div>
				<!-- TODO -->
				<!-- || !endable.includes(event.new_status) -->
				{#if i != events.length - 1 || !statusStore.nodesR[event.new_status_id].endable}
					<div class="h-[18px] bg-blue-500 -mx-[10px] px-[20px] flex-grow text-center">
						{#if event.timeDiff}
							<div class="-mt-[3px] text-white text-nowrap whitespace-nowrap">
								<span class="bi bi-clock"></span>
								{event.timeDiff}
							</div>
						{/if}
					</div>
					{#if i == events.length - 1}
						<!--div class="h-[15px] w-[15px] bg-blue-500 rotate-45"></div-->
					{/if}
				{/if}
			{/each}
		</div>
	</div>
{/if}
