<script lang="ts">
	import { enhance } from '$app/forms';
	import { Input, Label, Button, Spinner, Toast } from 'flowbite-svelte';
	import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';

	export let formValues: any;
	export let inputLoading: any;
	export let updateInputLoading: any;
	export let reloadTable: any;

	let inputError: string | null = null;
	let inputResponse: string | null = null;

	function handleSubmit({ formData }: { formData: FormData }) {
		if (formValues.id) {
			formData.set('id', formValues.id);
		}

		updateInputLoading(true);

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

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

			if (result.type !== 'success') {
				inputError = result.data.message;
				updateInputLoading(false);
				return;
			}

			inputResponse = result.data.message;

			reloadTable();
			updateInputLoading(false);
		};
	}

	const resetActionForm = () => {
		inputError = null;
		inputResponse = null;
	};
</script>

<form method="post" action="?/update" use:enhance={handleSubmit}>
	<div class="grid gap-6 mb-6 grid-cols-2 lg:grid-cols-5 w-fit">
		<div>
			<Label for="rate" class="mb-2">Sunday Rate Percentage</Label>
			<Input
				type="number"
				id="sundayRatePer"
				name="sundayRatePer"
				min="0"
				step=".01"
				required
				on:keydown={resetActionForm}
				bind:value={formValues.sundayRatePer}
			/>
		</div>
		<div>
			<Label for="rate" class="mb-2">Normal Rate Percentage</Label>
			<Input
				type="number"
				id="normalRatePer"
				name="normalRatePer"
				min="0"
				step=".01"
				required
				on:keydown={resetActionForm}
				bind:value={formValues.normalRatePer}
			/>
		</div>
		<div>
			<Label for="rate" class="mb-2">Public Holiday Rate Percentage</Label>
			<Input
				type="number"
				id="publicHolidayRatePer"
				name="publicHolidayRatePer"
				min="0"
				step=".01"
				required
				on:keydown={resetActionForm}
				bind:value={formValues.publicHolidayRatePer}
			/>
		</div>

		{#if inputError !== null}
			<Toast color="red" position="top-right" dismissable={true}>
				<svelte:fragment slot="icon">
					<CloseCircleSolid class="w-5 h-5" />
					<span class="sr-only">Error icon</span>
				</svelte:fragment>
				{inputError}
			</Toast>
		{/if}

		{#if inputResponse !== null}
			<Toast color="green" position="top-right" dismissable={true}>
				<svelte:fragment slot="icon">
					<CheckCircleSolid class="w-5 h-5" />
					<span class="sr-only">Check icon</span>
				</svelte:fragment>
				{inputResponse} successfully.
			</Toast>
		{/if}

		<div class="flex gap-4">
			<Button type="submit" size="md" disabled={!formValues.id}
				>{#if inputLoading}
					<Spinner />
				{:else}
					<p>Update</p>
				{/if}
			</Button>
		</div>
	</div>
</form>