<script lang="ts">
  import { Button } from "$lib/components";
  import type { Project } from "$lib/models/projects/Project";
  import { onMount } from "svelte";
  import { faker } from "@faker-js/faker";
  import { Temporal } from "temporal-polyfill";
  import { createTable, Subscribe, Render } from "svelte-headless-table";
  import { ProjectStatus } from "$lib/models/projects/ProjectStatus";
  import { writable, type Writable } from "svelte/store";
  import LL from "$lib/i18n/i18n-svelte";

  let projects: Writable<Array<Project>> = writable([]);

  onMount(() => {
    let i = 0;
    const tempProjects = [];
    while (i < 101) {
      tempProjects.push({
        id: crypto.randomUUID(),
        name: faker.word.preposition(),
        start: Temporal.Now.plainDateISO(),
        description: faker.lorem.words(3),
        members: [],
        status: ProjectStatus.IDLE,
      });
      i++;
    }
    projects.set(tempProjects);
  });

  const table = createTable(projects);
  const columns = table.createColumns([
    table.column({ header: $LL.name(), accessor: "name" }),
    table.column({ header: "Status", accessor: "status" }),
    table.column({ header: "Start", accessor: "start" }),
    table.column({ header: "Description", accessor: "description" }),
  ]);

  const { headerRows, rows, tableAttrs, tableBodyAttrs } = table.createViewModel(columns);
</script>

<div class="px-4 sm:px-6 lg:px-8">
  <div class="sm:flex sm:items-center">
    <div class="sm:flex-auto">
      <h1 class="text-xl font-semibold text-gray-900">Projects</h1>
      <p class="mt-2 text-sm text-gray-700">A list of all the projects in your organsation.</p>
    </div>
    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
      <Button text="Create project" />
    </div>
  </div>
  <div class="-mx-4 mt-8 overflow-hidden sm:-mx-6 md:mx-0 MuonW PowerTable">
    <table {...$tableAttrs} class="min-w-full divide-y divide-gray-300">
      <thead class="bg-gray-50">
        {#each $headerRows as headerRow (headerRow.id)}
          <Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
            <tr {...rowAttrs}>
              {#each headerRow.cells as cell (cell.id)}
                <Subscribe attrs={cell.attrs()} let:attrs>
                  <th {...attrs} class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
                    <Render of={cell.render()} />
                  </th>
                </Subscribe>
              {/each}
            </tr>
          </Subscribe>
        {/each}
      </thead>
      <tbody {...$tableBodyAttrs} class="divide-y divide-gray-200 bg-white">
        {#each $rows as row (row.id)}
          <Subscribe rowAttrs={row.attrs()} let:rowAttrs>
            <tr {...rowAttrs}>
              {#each row.cells as cell (cell.id)}
                {@const materialisedCell = cell.render()}
                <Subscribe attrs={cell.attrs()} let:attrs>
                  <td class="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6" {...attrs}>
                    <Render of={materialisedCell} />
                  </td>
                </Subscribe>
              {/each}
            </tr>
          </Subscribe>
        {/each}
      </tbody>
    </table>
  </div>
</div>
