import { Button } from '@luke-ui/react/button';
import { CheckboxField } from '@luke-ui/react/checkbox-field';
import { Cluster } from '@luke-ui/react/cluster';
import { ComboboxField, ComboboxItem } from '@luke-ui/react/combobox-field';
import { Stack } from '@luke-ui/react/stack';
import { TextInputField } from '@luke-ui/react/text-input-field';
import type { SubmitEvent } from 'react';
import { useState } from 'react';

const countries = [
	{ id: 'australia', label: 'Australia' },
	{ id: 'canada', label: 'Canada' },
	{ id: 'new-zealand', label: 'New Zealand' },
	{ id: 'united-states', label: 'United States' },
];

type Errors = { country?: string; email?: string; terms?: string };

export default () => {
	const [errors, setErrors] = useState<Errors>({});

	function handleSubmit(event: SubmitEvent<HTMLFormElement>) {
		event.preventDefault();
		const data = new FormData(event.currentTarget);
		const emailValue = data.get('emailAddress');
		const email = typeof emailValue === 'string' ? emailValue : '';

		setErrors({
			country: data.get('country') ? undefined : 'Choose the country where you work.',
			email: email.includes('@')
				? undefined
				: 'Enter an email address in the form you@example.com.',
			terms: data.get('terms') ? undefined : 'Accept the terms of service before you continue.',
		});
	}

	return (
		<form noValidate onSubmit={handleSubmit}>
			<Stack gap="sp16" maxInlineSize="20rem">
				<Stack minBlockSize="5.5rem">
					<TextInputField
						errorMessage={errors.email}
						label="Email address"
						name="emailAddress"
						placeholder="you@example.com"
					/>
				</Stack>
				<Stack minBlockSize="5.5rem">
					<ComboboxField
						defaultItems={countries}
						errorMessage={errors.country}
						label="Work location"
						name="country"
						placeholder="Choose a country"
					>
						{(item) => <ComboboxItem>{item.label}</ComboboxItem>}
					</ComboboxField>
				</Stack>
				<Stack minBlockSize="4.5rem">
					<CheckboxField
						errorMessage={errors.terms}
						label="I accept the terms of service"
						name="terms"
					/>
				</Stack>
				<Cluster>
					<Button type="submit">Create account</Button>
				</Cluster>
			</Stack>
		</form>
	);
};