import { Handlers, PageProps } from "$fresh/server.ts";
import { Package } from "$classes/package.ts";

import moment from "npm:moment";

export const handler: Handlers<HomeProps> = {
  async GET(_req, ctx) {
    const packages = await Package.find({}).limit(10).sort({ namespace: 'asc', name: 'asc' });

    return ctx.render({ packages });
  }
}

interface HomeProps {
  packages: Package[]
}

export default function Home({ data: { packages } }: PageProps<HomeProps>) {
  return (
    <div>
      <div class="container mx-auto">
        <ul class="list bg-base-100 rounded-box shadow-md w-full">
          <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Browse Packages</li>

          { packages.map(_package => (
            <a href={`/${_package.namespace}/${_package.name}`}>
              <li class="list-row">
                <div class="list-col-grow">
                  <div>{_package.namespace}/{_package.name}</div>
                  <div class="text-xs uppercase font-semibold opacity-60">{moment(_package.events[_package.events.length-1]?.timestamp).fromNow()}</div>
                </div>
                <button type="button" class="btn btn-square btn-ghost">
                  <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
                </button>
              </li>
            </a>
          )) }
        </ul>
      </div>
    </div>
  );
}