<script lang="ts">
	import LabelWrapper from "$lib/components/atoms/label-wrapper.svelte";
	import Title from "$lib/components/atoms/title.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 { PHONE_COUNTRY_CODES } from "@pkg/logic/core/data/phonecc";
	import type { CustomerInfoModel } from "../data";
	import { customerInfoVM } from "./customerinfo.vm.svelte";

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

	function onSubmit(e: SubmitEvent) {
		e.preventDefault();
		customerInfoVM.validateCustomerInfo(info);
	}

	function debounceValidate() {
		customerInfoVM.debounceValidate(info);
	}
</script>

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

		<LabelWrapper
			label="Middle Name"
			error={customerInfoVM.errors.middleName}
		>
			<Input
				placeholder="Middle Name (Optional)"
				bind:value={info.middleName}
				oninput={() => debounceValidate()}
				maxlength={64}
			/>
		</LabelWrapper>

		<LabelWrapper label="Last Name" error={customerInfoVM.errors.lastName}>
			<Input
				placeholder="Last Name"
				bind:value={info.lastName}
				required
				oninput={() => debounceValidate()}
				minlength={1}
				maxlength={64}
			/>
		</LabelWrapper>
	</div>

	<!-- Email Field -->
	<LabelWrapper label="Email" error={customerInfoVM.errors.email}>
		<Input
			placeholder="Email"
			bind:value={info.email}
			type="email"
			oninput={() => debounceValidate()}
			required
			maxlength={128}
		/>
	</LabelWrapper>

	<!-- Phone Number Field -->
	<LabelWrapper label="Phone Number" error={customerInfoVM.errors.phoneNumber}>
		<div class="flex gap-2">
			<Select.Root
				type="single"
				required
				onValueChange={(code) => {
					info.phoneCountryCode = code;
					debounceValidate();
				}}
				name="phoneCode"
			>
				<Select.Trigger class="w-28">
					{#if info.phoneCountryCode}
						{info.phoneCountryCode}
					{:else}
						Select
					{/if}
				</Select.Trigger>
				<Select.Content>
					{#each PHONE_COUNTRY_CODES as { country, phoneCode }}
						<Select.Item value={phoneCode}>
							<span class="flex items-center gap-2">
								{phoneCode} ({country})
							</span>
						</Select.Item>
					{/each}
				</Select.Content>
			</Select.Root>

			<Input
				placeholder="Phone Number"
				type="tel"
				bind:value={info.phoneNumber}
				required
				oninput={() => debounceValidate()}
				class="flex-1"
				minlength={1}
				maxlength={20}
			/>
		</div>
	</LabelWrapper>

	<!-- Address Section -->
	<Title size="h5">Address Information</Title>

	<div class="flex flex-col gap-4 md:flex-row">
		<LabelWrapper label="Country" error={customerInfoVM.errors.country}>
			<Select.Root
				type="single"
				required
				onValueChange={(e) => {
					info.country = e;
					debounceValidate();
				}}
				name="country"
			>
				<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={customerInfoVM.errors.state}>
			<Input
				placeholder="State/Province"
				bind:value={info.state}
				required
				oninput={() => debounceValidate()}
				minlength={1}
				maxlength={128}
			/>
		</LabelWrapper>
	</div>

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

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

	<LabelWrapper label="Address" error={customerInfoVM.errors.address}>
		<Input
			placeholder="Street Address"
			bind:value={info.address}
			required
			minlength={1}
			oninput={() => debounceValidate()}
		/>
	</LabelWrapper>

	<LabelWrapper
		label="Address 2 (Optional)"
		error={customerInfoVM.errors.address2}
	>
		<Input
			placeholder="Apartment, suite, etc. (Optional)"
			bind:value={info.address2}
			oninput={() => debounceValidate()}
		/>
	</LabelWrapper>
</form>
