<script lang="ts">
	import {
		type Application,
		type ApplicationEvent,
		ApplicationStatus,
		EventType,
		ApplicationStatusIconMaping,

		ApplicationStatusMaping

	} from '$lib/ApplicationsStore.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 status: number | undefined = undefined;

		let lastEvent: ApplicationEvent | undefined = undefined;

		let _events: typeof events = [];

		let checkArray: (number | undefined)[] = [
			ApplicationStatus.WorkingOnIt,
			ApplicationStatus.ToApply
		];

		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 (event.event_type === EventType.Creation) {
				status = ApplicationStatus.ToApply;
			}
			if (event.event_type !== EventType.StatusUpdate) {
				_events.push({ ...event, timeDiff: time });
				lastEvent = event;
				continue;
			}
			if (checkArray.includes(status) && checkArray.includes(event.new_status) && lastEvent?.event_type !== EventType.Creation ) {
				continue;
			}

			status = event.new_status;
			_events.push({ ...event, timeDiff: time });
			lastEvent = event;
		}

		events = _events;
	});

	let endable: number[] = [
		ApplicationStatus.Expired,
		ApplicationStatus.Ignore,
		ApplicationStatus.ApplyedButSaidNo,
		ApplicationStatus.LinkedApplication
	];
</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]">
						{event.timeDiff}
					</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 class="bi bi-plus"></span>
					{:else if event.event_type == EventType.View}
						<span class="bi bi-eye"></span>
					{:else}
						<span title={ApplicationStatusMaping[event.new_status]} class="bi bi-{ApplicationStatusIconMaping[event.new_status]}"></span>
					{/if}
				</div>
				{#if i != events.length - 1 || !endable.includes(event.new_status)}
					<div class="min-w-[70px] h-[13px] bg-blue-500 -mx-[10px] flex-grow">
						{event.timeDiff}
					</div>
					{#if i == events.length - 1}
						<!--div class="h-[15px] w-[15px] bg-blue-500 rotate-45"></div-->
					{/if}
				{/if}
			{/each}
		</div>
	</div>
{/if}
