<script lang="ts">
	import LabelWrapper from "$lib/components/atoms/label-wrapper.svelte";
	import Input from "$lib/components/ui/input/input.svelte";
	import * as Select from "$lib/components/ui/select";
	import { COUNTRIES_SELECT } from "$lib/core/countries";
	import { capitalize } from "$lib/core/string.utils";
	import type { CustomerInfoModel } from "$lib/domains/customerinfo/data";
	import { billingDetailsVM } from "./billing.details.vm.svelte";

	let { info = $bindable() }: { info: CustomerInfoModel } = $props();

	function onSubmit(e: SubmitEvent) {
		e.preventDefault();
		billingDetailsVM.validatePII(info);
	}

	let validationTimeout = $state(undefined as undefined | NodeJS.Timer);

	function debounceValidate() {
		if (validationTimeout) {
			clearTimeout(validationTimeout);
		}
		validationTimeout = setTimeout(() => {
			billingDetailsVM.validatePII(info);
		}, 500);
	}
</script>

<form action="#" class="flex w-full flex-col gap-4" onsubmit={onSubmit}>
	<div class="flex flex-col gap-4 md:flex-row">
		<LabelWrapper
			label="First Name"
			error={billingDetailsVM.piiErrors.firstName}
		>
			<Input
				placeholder="First Name"
				bind:value={info.firstName}
				required
				oninput={() => debounceValidate()}
			/>
		</LabelWrapper>

		<LabelWrapper
			label="Middle Name"
			error={billingDetailsVM.piiErrors.middleName}
		>
			<Input
				placeholder="Middle Name"
				bind:value={info.middleName}
				oninput={() => debounceValidate()}
				required
			/>
		</LabelWrapper>

		<LabelWrapper
			label="Last Name"
			error={billingDetailsVM.piiErrors.lastName}
		>
			<Input
				placeholder="Last Name"
				bind:value={info.lastName}
				required
				oninput={() => debounceValidate()}
			/>
		</LabelWrapper>
	</div>

	<div class="flex flex-col gap-4 md:flex-row">
		<LabelWrapper label="Country" error={billingDetailsVM.piiErrors.country}>
			<Select.Root
				type="single"
				required
				onValueChange={(e) => {
					info.country = e;
					debounceValidate();
				}}
				name="role"
			>
				<Select.Trigger class="w-full">
					{capitalize(
						info.country.length > 0 ? info.country : "Select",
					)}
				</Select.Trigger>
				<Select.Content>
					{#each COUNTRIES_SELECT as country}
						<Select.Item value={country.value}>
							{country.label}
						</Select.Item>
					{/each}
				</Select.Content>
			</Select.Root>
		</LabelWrapper>

		<LabelWrapper label="State" error={billingDetailsVM.piiErrors.state}>
			<Input
				placeholder="State"
				bind:value={info.state}
				required
				oninput={() => debounceValidate()}
			/>
		</LabelWrapper>
	</div>

	<div class="flex flex-col gap-4 md:flex-row">
		<LabelWrapper label="City" error={billingDetailsVM.piiErrors.city}>
			<Input
				placeholder="City"
				bind:value={info.city}
				required
				minlength={1}
				maxlength={80}
				oninput={() => debounceValidate()}
			/>
		</LabelWrapper>

		<LabelWrapper label="Zip Code" error={billingDetailsVM.piiErrors.zipCode}>
			<Input
				placeholder="Zip Code"
				bind:value={info.zipCode}
				required
				minlength={1}
				oninput={() => debounceValidate()}
				maxlength={12}
			/>
		</LabelWrapper>
	</div>

	<LabelWrapper label="Address" error={billingDetailsVM.piiErrors.address}>
		<Input
			placeholder="Address"
			bind:value={info.address}
			required
			minlength={1}
			maxlength={128}
			oninput={() => debounceValidate()}
		/>
	</LabelWrapper>

	<LabelWrapper label="Address 2" error={billingDetailsVM.piiErrors.address2}>
		<Input
			placeholder="Address 2"
			bind:value={info.address2}
			required
			minlength={1}
			maxlength={128}
		/>
	</LabelWrapper>
</form>
