import { Handlers, PageProps } from '$fresh/server.ts'
import { useSignal } from '@preact/signals'
import { db, Todo, User } from '$models'
import { TodoList } from '../components/TodoList.tsx'

interface Data {
	users: User[]
	unassignedTodos: Todo[]
}

export const handler: Handlers = {
	async GET(_req, ctx) {
		const users = await db.users.findMany({ include: { assignedTodos: true } })
		const unassignedTodos = await db.todos.findMany({
			where: { assigneeUserId: null },
		})
		return ctx.render({ users, unassignedTodos })
	},
}

export default function Home(
	{ data: { users, unassignedTodos } }: PageProps<Data>,
) {
	const count = useSignal(3)
	return (
		<div class='px-4 py-8 mx-auto bg-emerald-950'>
			<div class='max-w-screen-md mx-auto flex flex-col items-center justify-center'>
				{users.map((u) => <TodoList user={u} />)}
			</div>
		</div>
	)
}