<script lang="ts">
	import { PUBLIC_BASE_API_URL } from '$env/static/public';
	import {
		Button,
		Input,
		Label,
		P,
		Select,
		Spinner,
		Table,
		TableBody,
		TableBodyCell,
		TableBodyRow,
		TableHead,
		TableHeadCell
	} from 'flowbite-svelte';
	import { ArrowRightSolid, ArrowLeftSolid } from 'flowbite-svelte-icons';
	import type { PageData } from './$types';
	import Form from './Form.svelte';
	import { enhance } from '$app/forms';
	import { onMount } from 'svelte';

	export let data: PageData;

	// Input value
	let formValues: {
		selection: any;
		id: null | string;
		name: null | string;
		activityGroup: null | string;
		unit: null | string;
		rate: null | string;
		sector: null | number;
		incentiveName: null | number;
		isActive: null | boolean;
		shouldShowInOtfilter: null | boolean;
	} = {
		id: null,
		name: null,
		activityGroup: null,
		unit: null,
		rate: null,
		sector: null,
		incentiveName: null,
		isActive: null,
		shouldShowInOtfilter: null,
		selection: undefined
	};

	let inputLoading = false;

	const loadDropdown = async (date?: string) => {
		inputLoading = true;
		const response = await fetch(
			`${PUBLIC_BASE_API_URL}/report/dropdown${date ? '?date=' + date : ''}`,
			{
				headers: {
					Authorization: `Bearer ${data.accessToken}`
				}
			}
		);

		inputLoading = false;

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

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

	function resetFormInput() {
		formValues = {
			...formValues,
			id: null,
			name: null,
			unit: null,
			rate: null,
			sector: null,
			incentiveName: null,
			activityGroup: null,
			isActive: false,
			shouldShowInOtfilter: false
		};
	}

	function updateInputLoading(state: boolean) {
		inputLoading = state;
	}

	// Page meta value
	let page = 1;
	let pageCount: number | string = '...';
	let hasPreviousPage = false;
	let hasNextPage = false;

	// Filter page value
	let filterId: string | null = null;
	let filterActivity: string | null = null;
	let filterActivityGroup: string | null = null;
	let filterSector: string | null = null;
	let filterIncentive: string | null = null;
	let filterIsActive: boolean | null = null;
	let tableError: string | null = null;

	let filterIsActiveSelect = [
		{ name: 'All', value: null },
		{ name: 'True', value: true },
		{ name: 'False', value: false }
	];

	let tableLoading = false;
	let tableData: any;

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

		formData.set('page', page);

		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;
				pageCount = 1;
				hasPreviousPage = false;
				hasNextPage = false;
				return;
			}

			tableError = null;
			tableData = result.data.returnData;
			pageCount = result.data.pageCount;
			hasPreviousPage = result.data.hasPreviousPage;
			hasNextPage = result.data.hasNextPage;
			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(async () => {
		reloadTable();

		const dropDown = await loadDropdown();

		formValues.selection = dropDown;
	});
</script>

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

	<div class="mt-10 flex flex-col">
		<form method="post" id="getTableData" action="?/getTableData" use:enhance={handleSubmit}>
			<div class="mb-5 flex gap-3">
				<div>
					<Label for="filterId" class="mb-2">Id</Label>
					<Input id="filterId" type="text" name="filterId" bind:value={filterId} />
				</div>
				<div>
					<Label for="filterActivity" class="mb-2">Activity</Label>
					<Input
						type="text"
						id="filterActivity"
						name="filterActivity"
						bind:value={filterActivity}
					/>
				</div>
				<div>
					<Label for="filterActivityGroup" class="mb-2">Activity Group</Label>
					<Input
						type="text"
						id="filterActivityGroup"
						name="filterActivityGroup"
						bind:value={filterActivityGroup}
					/>
				</div>
				<div>
					<Label for="filterSector" class="mb-2">Sector</Label>
					<Input id="filterSector" type="text" name="filterSector" bind:value={filterSector} />
				</div>
				<div>
					<Label for="filterIncentive" class="mb-2">Incentive</Label>
					<Input
						id="filterIncentive"
						type="text"
						name="filterIncentive"
						bind:value={filterIncentive}
					/>
				</div>
				<div>
					<Label>
						Is Active
						<Select
							class="mt-2"
							items={filterIsActiveSelect}
							bind:value={filterIsActive}
							name="filterIsActive"
						/>
					</Label>
				</div>
				<Button
					color="alternative"
					class="h-fit place-self-end"
					on:click={() => {
						filterActivity = null;
						filterActivityGroup = null;
						filterSector = null;
						filterIncentive = null;
						filterIsActive = null;
					}}>Reset</Button
				>
				<Button type="submit" class="h-fit place-self-end">Filter</Button>
			</div>
		</form>

		{#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 class="flex gap-3 mt-5">
		<Button
			size="xs"
			disabled={!hasPreviousPage}
			on:click={async () => {
				page--;
				tableError = null;
				reloadTable();
			}}
		>
			<ArrowLeftSolid size="sm" />
		</Button>
		<P size="base" class="self-center">{page}/{pageCount}</P>
		<Button
			size="xs"
			disabled={!hasNextPage}
			on:click={async () => {
				page++;
				tableError = null;
				reloadTable();
			}}
		>
			<ArrowRightSolid size="sm" />
		</Button>
	</div>
</div>