import { Handlers, PageProps } from "$fresh/server.ts";
import { listNotes } from "@/db/mod.ts";
import { Page } from "@/components/Page.tsx";
import { type Note } from "@/types.ts";

export const handler: Handlers<Note[]> = {
  async GET(_request, context) {
    const result = await listNotes();
    if (!result) throw "unable to fetch from database";
    return await context.render(result.rows);
  },
};

export default function NotesPage({ data: notes }: PageProps<Note[]>) {
  return (
    <Page>
      <h1>List of Notes</h1>
      <p>Create a note:</p>
      <form class="flex flex-col" action="./note/create" method="POST">
        <textarea rows={6} class="" name="content">
        </textarea>
        <input class="mt-2" type="submit" value="Post" />
      </form>
      {notes.map(({ id, content, createdAt }) => (
        <div class="my-4" key={id}>
          <span>
            <a href={`/note/${id}`} class="text-blue-500">Note {id}</a>{" "}
            created at {createdAt.toLocaleString()}
          </span>
          <blockquote class="mt-2 pl-4 border-l(solid 4)">
            <pre>{content}</pre>
          </blockquote>
        </div>
      ))}
    </Page>
  );
}