import { Button, Form, Input, Slider, Textarea } from "@heroui/react"
import { createFileRoute } from "@tanstack/react-router"
import type { FormEvent } from "react"
import { useProfile } from "@/lib/hooks/user/useCreateUser"

export const Route = createFileRoute("/_authed/register")({
	component: RouteComponent
})

function RouteComponent() {
	const { errors, isPending, profile } = useProfile()
	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
		e.preventDefault()
		const formData = new FormData(e.currentTarget)
		profile({
			id: "e6472b9d-01a9-4e2e-8bdc-0ddaa9baf5d8",
			firstName: formData.get("firstName") as string,
			lastName: formData.get("lastName") as string
		})
	}
	return (
		<div>
			<Form
				className="grid gap-2 max-w-sm w-full"
				onSubmit={handleSubmit}
				validationErrors={errors}
			>
				<Input name="name" label="Nombre completo" isRequired />
				<Input name="company" label="Empresa" />
				<Input name="role" label="Cargo" />
				<Textarea name="description" label="Descripción" />
				<Textarea name="differentiator" label="¿Qué te hace diferente?" />
				<Slider name="coverage_areas" label="Areas de cobertura" />
				<Input name="services" label="Servicios" />{" "}
				{/* Crear varios checkboxes */}
				<Button isLoading={isPending} type="submit">
					Crear usuario
				</Button>
			</Form>
		</div>
	)
}
