<script lang="ts">
	import {
		Spinner,
		Table,
		TableBody,
		TableBodyCell,
		TableBodyRow,
		TableHead,
		TableHeadCell
	} from 'flowbite-svelte';
	import Form from './Form.svelte';
	import { enhance } from '$app/forms';
	import { onMount } from 'svelte';

	// Input value
	let formValues: {
		sundayRatePer: null | number;
		normalRatePer: null | number;
		publicHolidayRatePer: null | number;
	} = {
		sundayRatePer: null,
		normalRatePer: null,
		publicHolidayRatePer: null
	};

	let inputLoading = false;

	async function editFormValue(el: any) {
		formValues = {
			...el
		};
	}

	function updateInputLoading(state: boolean) {
		inputLoading = state;
	}
	let tableError: string | null = null;
	let tableLoading = false;
	let tableData: any;

	function handleSubmit({ formData }: { formData: any }) {
		tableLoading = true;

		return async ({ result, update }: { result: any; update: any }) => {
			tableLoading = false;
			await update({ reset: false });

			if (result.data.id !== 'tableData') {
				return;
			}

			if (result.type !== 'success') {
				tableError = result.data.message;
				tableData = null;
				return;
			}

			tableError = null;
			tableData = result.data.returnData;
			return;
		};
	}

	function reloadTable() {
		const form: any = document.getElementById('getTableData'); // Replace with your form ID
		const submitEvent = new Event('submit', { bubbles: true, cancelable: true });

		// Dispatch the submit event on the form element
		form.dispatchEvent(submitEvent);
	}

	onMount(() => {
		reloadTable();
	});
</script>

<div>
	<Form {reloadTable} {formValues} {updateInputLoading} {inputLoading} />

	<div class="mt-10 flex flex-col">
		<form method="post" id="getTableData" action="?/getTableData" use:enhance={handleSubmit} />

		{#if tableLoading}
			<Spinner />
			<p>loading...</p>
		{/if}

		{#if tableError}
			<p>{tableError}</p>
		{/if}

		{#if tableData}
			<Table hoverable={true}>
				<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 ? '-' : el[keys]}</TableBodyCell
								>
							{/each}
							<TableBodyCell class="font-normal text-center">
								<button
									class="font-medium text-primary-600 hover:underline dark:text-primary-500 cursor-pointer"
									on:click={editFormValue.bind(null, el)}
								>
									Edit
								</button></TableBodyCell
							>
						</TableBodyRow>
					{/each}
				</TableBody>
			</Table>
		{/if}
	</div>
</div>