<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 resetFormInput: 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="id" class="mb-2">Id</Label>
			<Input disabled type="text" id="id" name="id" bind:value={formValues.id} />
		</div>
		<!-- <div>
			<Label for="restDayWages" class={`mb-2 ${!!formValues.id ? 'text-gray-500' : 'text-black'}`}
				>Rest Day Wages</Label
			>
			<Input
				type="number"
				id="restDayWages"
				name="restDayWages"
				min="0"
				step=".01"
				on:keydown={resetActionForm}
				bind:value={formValues.restDayWages}
				disabled={!!formValues.id}
			/>
		</div>
		<div>
			<Label for="advance" class={`mb-2 ${!!formValues.id ? 'text-gray-500' : 'text-black'}`}
				>Advance</Label
			>
			<Input
				type="number"
				id="advance"
				name="advance"
				step=".01"
				min="0"
				on:keydown={resetActionForm}
				bind:value={formValues.advance}
				disabled={!!formValues.id}
			/>
		</div> -->
		<div>
			<Label for="cleaningFee" class="mb-2">Cleaning Fee</Label>
			<Input
				type="number"
				id="cleaningFee"
				name="cleaningFee"
				step=".01"
				min="0"
				on:keydown={resetActionForm}
				bind:value={formValues.cleaningFee}
			/>
		</div>
		<div>
			<Label for="epf" class="mb-2">EPF</Label>
			<Input
				type="number"
				id="epf"
				name="epf"
				step=".01"
				min="0"
				on:keydown={resetActionForm}
				bind:value={formValues.epf}
			/>
		</div>
		<div>
			<Label for="eis" class="mb-2">EIS</Label>
			<Input
				type="number"
				id="eis"
				name="eis"
				step=".01"
				min="0"
				on:keydown={resetActionForm}
				bind:value={formValues.eis}
			/>
		</div>
		<div>
			<Label for="socso" class="mb-2">Socso</Label>
			<Input
				type="number"
				id="socso"
				name="socso"
				step=".01"
				min="0"
				on:keydown={resetActionForm}
				bind:value={formValues.socso}
			/>
		</div>
		<div>
			<Label for="levy" class="mb-2">Levy</Label>
			<Input
				type="number"
				id="levy"
				name="levy"
				step=".01"
				min="0"
				on:keydown={resetActionForm}
				bind:value={formValues.levy}
			/>
		</div>
		<div>
			<Label for="deduct" class="mb-2">Deduct</Label>
			<Input
				type="number"
				id="deduct"
				name="deduct"
				step=".01"
				min="0"
				on:keydown={resetActionForm}
				bind:value={formValues.deduct}
			/>
		</div>
		<div>
			<Label for="addition" class="mb-2">Addition</Label>
			<Input
				type="number"
				id="addition"
				name="addition"
				step=".01"
				min="0"
				on:keydown={resetActionForm}
				bind:value={formValues.addition}
			/>
		</div>
		<div>
			<Label for="remark" class="mb-2">Remark (Optional)</Label>
			<Input
				type="text"
				id="remark"
				name="remark"
				on:keydown={resetActionForm}
				bind:value={formValues.remark}
			/>
		</div>
	</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 color="alternative" on:click={resetFormInput}>Reset</Button>
		<Button type="submit" color="purple" disabled={!formValues.id}>
			{#if inputLoading}
				<Spinner />
			{:else}
				<p>Update</p>
			{/if}</Button
		>
	</div>
</form>