import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
import ky from "ky";
import { OAUTH_LINK } from "~/lib/constants";

export default component$(() => {
  const files = useSignal<any[]>([]);
  
  useVisibleTask$(async () => {
    const res: any[] | undefined = await ky.get("/api/list", { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` } })
      .json();
    console.log(res);
    files.value = res!;
  })

  return (
    <>
      <a href={OAUTH_LINK}>oauth</a>
      {files.value.map((file) => (
        <div key={file.ID}>
          <h2>Owner: {file.Owner}</h2>
          <p>File ID: {file.ID}</p>
          <p>Created: {new Date(file.CreatedAt).toLocaleString()}</p>
        </div>
      ))}
    </>
  );
});

export const head: DocumentHead = {
  title: "Welcome to Qwik",
  meta: [
    {
      name: "description",
      content: "Qwik site description",
    },
  ],
};