<script lang="ts">
	import { FormControl } from '$ui/form';
	import FormDescription from '$ui/form/form-description.svelte';
	import FormFieldErrors from '$ui/form/form-field-errors.svelte';
	import FormField from '$ui/form/form-field.svelte';
	import FormLabel from '$ui/form/form-label.svelte';
	import RadioGroup from '$ui/radio-group/radio-group.svelte';
	import RadioGroupItem from '$ui/radio-group/radio-group-item.svelte';
	import { SchedulingMode } from '@/types';
	import { cn } from '@/lib/utils';
	import Label from '$ui/label/label.svelte';
	import Card from '$ui/card/card.svelte';
	import CardContent from '$ui/card/card-content.svelte';
	import CardHeader from '$ui/card/card-header.svelte';
	import { _ } from 'svelte-i18n';
	import Button from '$ui/button/button.svelte';
	import { ArrowRightIcon } from 'lucide-svelte';

	let { competitionId }: { competitionId: number } = $props();

	let schedulingMode: SchedulingMode = $state(SchedulingMode.single);

	async function submit() {
		const response = await fetch(`/api/competitions/${competitionId}`, {
			method: 'POST',
			credentials: 'include',
			body: JSON.stringify({ scheduling_mode: schedulingMode })
		});
	}
</script>

<div class="flex flex-col gap-4">
	<RadioGroup
		required
		bind:value={() => schedulingMode, (t: SchedulingMode) => {}}
		name="scheduling_mode"
	>
		{#each Object.values(SchedulingMode) as mode}
			<button
				class={cn(
					'flex h-full w-full items-center gap-4 rounded-xl border',
					schedulingMode === mode && ' border-green-500'
				)}
				onclick={() => (schedulingMode = mode)}
			>
				<Card class="w-full">
					<CardHeader class="flex justify-between">
						<Label class="text-start">{$_(mode)}</Label>
					</CardHeader>
					<CardContent>
						<RadioGroupItem hidden value={mode} />
						<Label class="text-start">{$_(`${mode}.description`)}</Label>
					</CardContent>
				</Card>
			</button>
		{/each}
	</RadioGroup>
	<div class="flex w-full justify-end">
		<Button onclick={submit}>Add Round<ArrowRightIcon /></Button>
	</div>
</div>
