<script lang="ts">
	import * as Form from '$lib/components/ui/form'
	import * as Select from '$lib/components/ui/select'
	import { Input } from '$lib/components/ui/input'
	import { superForm } from 'sveltekit-superforms'
	import { zod } from 'sveltekit-superforms/adapters'
	import { formSchema, intervals } from './schema'
	import { categories } from './schema'
	import { CalendarIcon } from 'lucide-svelte'
	import { Calendar } from '$lib/components/ui/calendar/index.js'
	import * as Popover from '$lib/components/ui/popover/index.js'
	import {
		CalendarDate,
		DateFormatter,
		type DateValue,
		getLocalTimeZone,
		parseDate,
		today,
	} from '@internationalized/date'
	import { cn } from '$lib/utils.js'
	import { buttonVariants } from '$lib/components/ui/button'

	let { data } = $props()

	const apiEndpoint = 'https://api.bybit.com/v5/market/kline'
	const form = superForm(data.form, {
		resetForm: false,
		SPA: true,
		validators: zod(formSchema),
		onUpdated: async ({ form }) => {
			if (!form.valid) return

			console.log(form.data)
			// Form validation
			const url = new URL(apiEndpoint)
			url.searchParams.set('symbol', form.data.symbol)
			url.searchParams.set('interval', form.data.interval)

			const start = new Date(
				form.data.start + ' ' + form.data.startTime + ':00',
			)
			url.searchParams.set('start', start.getTime().toString())

			const end = new Date(
				form.data.end + ' ' + form.data.endTime + ':00',
			)

			url.searchParams.set('end', end.getTime().toString())

			if (form.data.limit)
				url.searchParams.set('limit', form.data.limit.toString())

			if (form.data.category)
				url.searchParams.set('category', form.data.category)

			const response = await fetch(url)

			const data = await response.json()

			console.log(data.result.list)

			let csvContent =
				'data:text/csv;charset=utf-8,' +
				'startTime,openPrice,highPrice,lowPrice,closePrice,volume,turnover\n' +
				data.result.list
					.map((data: string[]) => {
						let newData = data
						newData[0] = new Date(parseInt(newData[0]))
							.toLocaleString()
							.replace(',', ' |')
						return newData
					})
					.map((e: any) => e.join(','))
					.join('\n')

			var encodedUri = encodeURI(csvContent)
			var link = document.createElement('a')
			link.setAttribute('href', encodedUri)
			link.setAttribute('download', 'data.csv')
			document.body.appendChild(link)

			link.click()
		},
	})

	const { form: formData, enhance } = form

	const df = new DateFormatter('en-US', {
		dateStyle: 'long',
	})

	let start = $state<DateValue | undefined>()
	let end = $state<DateValue | undefined>()

	$effect(() => {
		start = $formData.start ? parseDate($formData.start) : undefined
		end = $formData.end ? parseDate($formData.end) : undefined
	})

	let placeholder = $state<DateValue>(today(getLocalTimeZone()))
</script>

<form method="POST" use:enhance>
	<Form.Field {form} name="symbol">
		<Form.Control>
			{#snippet children({ props })}
				<Form.Label>Symbol</Form.Label>
				<Input {...props} bind:value={$formData.symbol} />
			{/snippet}
		</Form.Control>
		<Form.Description>Symbol</Form.Description>
		<Form.FieldErrors />
	</Form.Field>
	<Form.Field {form} name="limit">
		<Form.Control>
			{#snippet children({ props })}
				<Form.Label>Limit</Form.Label>
				<Input
					{...props}
					bind:value={$formData.limit}
					type="number" />
			{/snippet}
		</Form.Control>
		<Form.Description>Limit</Form.Description>
		<Form.FieldErrors />
	</Form.Field>
	<Form.Field {form} name="category">
		<Form.Control>
			{#snippet children({ props })}
				<Form.Label>Category</Form.Label>
				<Select.Root
					type="single"
					bind:value={$formData.category}
					name={props.name}>
					<Select.Trigger {...props}>
						{$formData.category ?? 'Select a category'}
					</Select.Trigger>
					<Select.Content>
						{#each categories as category}
							<Select.Item value={category} label={category} />
						{/each}
					</Select.Content>
				</Select.Root>
			{/snippet}
		</Form.Control>
		<Form.Description>Category</Form.Description>
		<Form.FieldErrors />
	</Form.Field>
	<Form.Field {form} name="interval">
		<Form.Control>
			{#snippet children({ props })}
				<Form.Label>Interval</Form.Label>
				<Select.Root
					type="single"
					bind:value={$formData.interval}
					name={props.name}>
					<Select.Trigger {...props}>
						{$formData.interval ?? 'Select a interval'}
					</Select.Trigger>
					<Select.Content>
						{#each intervals as interval}
							<Select.Item value={interval} label={interval} />
						{/each}
					</Select.Content>
				</Select.Root>
			{/snippet}
		</Form.Control>
		<Form.Description>Category</Form.Description>
		<Form.FieldErrors />
	</Form.Field>
	<Form.Field {form} name="start" class="flex flex-col">
		<Form.Control>
			{#snippet children({ props })}
				<Form.Label>Start Date</Form.Label>
				<Popover.Root>
					<Popover.Trigger
						{...props}
						class={cn(
							buttonVariants({ variant: 'outline' }),
							'w-[280px] justify-start pl-4 text-left font-normal',
							!start && 'text-muted-foreground',
						)}>
						{start
							? df.format(start.toDate(getLocalTimeZone()))
							: 'Pick a date'}
						<CalendarIcon class="ml-auto size-4 opacity-50" />
					</Popover.Trigger>
					<Popover.Content class="w-auto p-0" side="top">
						<Calendar
							type="single"
							value={start as DateValue}
							bind:placeholder
							minValue={new CalendarDate(1900, 1, 1)}
							maxValue={today(getLocalTimeZone())}
							calendarLabel="Date of birth"
							onValueChange={(v) => {
								if (v) {
									$formData.start = v.toString()
								} else {
									$formData.start = ''
								}
							}} />
					</Popover.Content>
				</Popover.Root>
				<Form.Description>
					Your date of birth is used to calculator your age
				</Form.Description>
				<Form.FieldErrors />
				<input hidden value={$formData.start} name={props.name} />
			{/snippet}
		</Form.Control>
	</Form.Field>
	<Form.Field {form} name="startTime">
		<Form.Control>
			{#snippet children({ props })}
				<Form.Label>Start Time</Form.Label>
				<Input
					{...props}
					bind:value={$formData.startTime}
					type="time" />
			{/snippet}
		</Form.Control>
		<Form.Description>Limit</Form.Description>
		<Form.FieldErrors />
	</Form.Field>
	<Form.Field {form} name="end" class="flex flex-col">
		<Form.Control>
			{#snippet children({ props })}
				<Form.Label>End Date</Form.Label>
				<Popover.Root>
					<Popover.Trigger
						{...props}
						class={cn(
							buttonVariants({ variant: 'outline' }),
							'w-[280px] justify-start pl-4 text-left font-normal',
							!end && 'text-muted-foreground',
						)}>
						{end
							? df.format(end.toDate(getLocalTimeZone()))
							: 'Pick a date'}
						<CalendarIcon class="ml-auto size-4 opacity-50" />
					</Popover.Trigger>
					<Popover.Content class="w-auto p-0" side="top">
						<Calendar
							type="single"
							value={end as DateValue}
							bind:placeholder
							minValue={new CalendarDate(1900, 1, 1)}
							maxValue={today(getLocalTimeZone())}
							calendarLabel="Date of birth"
							onValueChange={(v) => {
								if (v) {
									$formData.end = v.toString()
								} else {
									$formData.end = ''
								}
							}} />
					</Popover.Content>
				</Popover.Root>
				<Form.Description>
					Your date of birth is used to calculator your age
				</Form.Description>
				<Form.FieldErrors />
				<input hidden value={$formData.end} name={props.name} />
			{/snippet}
		</Form.Control>
	</Form.Field>
	<Form.Field {form} name="endTime">
		<Form.Control>
			{#snippet children({ props })}
				<Form.Label>End Time</Form.Label>
				<Input
					{...props}
					bind:value={$formData.endTime}
					type="time" />
			{/snippet}
		</Form.Control>
		<Form.Description>Limit</Form.Description>
		<Form.FieldErrors />
	</Form.Field>
	<Form.Button>Submit</Form.Button>
</form>
