'use client'

import { Button } from '@/components/ui/button'
import { Form } from './form'
import { useState } from 'react'

const STEPS = {
	INITIAL: 'INITIAL',
	LOADING: 'LOADING',
	PREVIEW: 'PREVIEW',
	ERROR: 'ERROR',
}

export default function Home() {
	const [result, setResult] = useState('')
	const [step, setStep] = useState(STEPS.INITIAL)

	const transformUrlToCode = async (url: string) => {
		setStep(STEPS.LOADING)
		const res = await fetch('/api/generate-code-from-image', {
			method: 'POST',
			body: JSON.stringify({ url }),
			headers: {
				'Content-Type': 'application/json',
			},
		})

		if (!res.ok || res.body === null) {
			throw new Error('Error al generar el código')
			setStep(STEPS.ERROR)
		}

		setStep(STEPS.PREVIEW)

		const reader = res.body.getReader()
		const decoder = new TextDecoder('utf-8')

		while (true) {
			const { done, value } = await reader.read()
			const chunk = decoder.decode(value)

			setResult((prevResult) => prevResult + chunk)

			console.log(chunk)
			if (done) break
		}
	}

	return (
		<div className="grid grid-cols-[400px_1fr]">
			<aside className="flex flex-col justify-between min-h-scren p-4 bg-gray-900">
				<header className="text-center">
					<h1 className="text-3xl font-semibold">IMAGE 2 CODE</h1>
					<h2 className="text-sm opacity-75">Pasa tus imágenes a código en segundos</h2>
				</header>
				<section>{/* Aquí irán los filtros... */}</section>
				<footer>Desarrollado por rdev</footer>
			</aside>
			<main className="bg-gray-950">
				<section className="max-w-5xl w-full mx-auto p-10">
					{step == STEPS.INITIAL && (
						<div>
							<Form transformUrlToCode={transformUrlToCode} />
						</div>
					)}

					{step == STEPS.LOADING && (
						<div className="flex flex-col items-center justify-center">
							<h2 className="text-2xl font-semibold">Generando código...</h2>
							<div className="w-24 h-24 border-4 border-gray-900 rounded-full animate-spin"></div>
						</div>
					)}

					{step == STEPS.PREVIEW && (
						<div className="rounded flex flex-col gap-4">
							<iframe srcDoc={result} className="w-full h-full border-4 rounded border-gray-700 aspect-video" />
							<pre className='pt-10'>
								<code>{result}</code>
							</pre>
						</div>
					)}

					{step == STEPS.ERROR && 'ERROR'}
				</section>
			</main>
		</div>
	)
}