<script lang="ts">
	import { PUBLIC_BASE_API_URL, PUBLIC_GOOGLE_SHEET_URL } from '$env/static/public';
	import { onMount } from 'svelte';
	import type { PageData } from './$types';
	import {
		Table,
		TableBody,
		TableBodyCell,
		TableBodyRow,
		TableHead,
		TableHeadCell
	} from 'flowbite-svelte';

	export let data: PageData;

	let inputLoading = false;
	let tableData: any[] = [];

	const getTableData = async () => {
		inputLoading = true;
		const response = await fetch(`${PUBLIC_BASE_API_URL}/report/unfinished-activity-record`, {
			headers: {
				Authorization: `Bearer ${data.accessToken}`
			}
		});

		inputLoading = false;

		const dataResponse = await response.json();
		return dataResponse;
	};

	onMount(async () => {
		tableData = await getTableData();
	});
</script>

<div>
	<p class="text-2xl font-bold">Welcome to UAP dashboard</p>

	<a class="pt-5 text-blue-600" href={PUBLIC_GOOGLE_SHEET_URL}
		>Click this link to redirect to Google Sheet</a
	>

	<div class="pt-5">
		{#if tableData.length > 0}
			<p class="font-bold">Unfinished employee activity record</p>
			<Table hoverable={true} divClass="overflow-y-scroll max-h-screen">
				<TableHead>
					{#each Object.keys(tableData[0]) as header}
						<TableHeadCell class="normal-case text-sm text-center">{header}</TableHeadCell>
					{/each}
				</TableHead>

				<TableBody>
					{#each tableData as el}
						<TableBodyRow>
							{#each Object.keys(el) as keys}
								<TableBodyCell class="font-normal text-center"
									>{el[keys] === null || el[keys] === 0
										? '-'
										: keys === 'date'
										? new Date(el[keys]).toDateString()
										: keys === 'currentHour'
										? Number(el[keys])
										: el[keys]}</TableBodyCell
								>
							{/each}
						</TableBodyRow>
					{/each}
				</TableBody>
			</Table>
		{/if}
	</div>
</div>