<script lang="ts">
  import { Table, TableBody, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';

  import type { SolutionTableProps } from '$features/workbooks/types/workbook';

  import TitleTableHeadCell from '$features/workbooks/components/list/TitleTableHeadCell.svelte';
  import TitleTableBodyCell from '$features/workbooks/components/list/TitleTableBodyCell.svelte';
  import WorkbookProgressCell from '$features/workbooks/components/list/WorkbookProgressCell.svelte';
  import WorkbookCompletionCell from '$features/workbooks/components/list/WorkbookCompletionCell.svelte';
  import WorkbookAuthorActionsCell from '$features/workbooks/components/list/WorkbookAuthorActionsCell.svelte';

  import { canRead } from '$lib/utils/authorship';
  import { getTaskResult } from '$features/workbooks/utils/workbooks';

  let { workbooks, userId, role, taskResults }: SolutionTableProps = $props();
</script>

<div class="overflow-auto rounded-md border border-gray-200 dark:border-gray-100">
  <Table shadow class="text-md">
    <TableHead class="text-sm bg-gray-100">
      <TitleTableHeadCell paddingX="px-4" />
      <TableHeadCell class="text-left min-w-[240px] max-w-[1440px] px-0">回答状況</TableHeadCell>
      <TableHeadCell></TableHeadCell>
      <TableHeadCell class="text-center px-0">修了</TableHeadCell>
      <TableHeadCell></TableHeadCell>
    </TableHead>

    <TableBody class="divide-y divide-gray-200 dark:divide-gray-700">
      {#each workbooks as workbook (workbook.id)}
        {#if canRead(workbook.isPublished, userId, workbook.authorId)}
          <TableBodyRow>
            <TitleTableBodyCell paddingLeft="pl-4" {workbook} />

            <WorkbookProgressCell
              workBookTasks={workbook.workBookTasks}
              taskResults={getTaskResult(workbook.id, taskResults)}
            />

            <WorkbookCompletionCell
              workBookTasks={workbook.workBookTasks}
              taskResults={getTaskResult(workbook.id, taskResults)}
            />

            <WorkbookAuthorActionsCell {workbook} {userId} {role} />
          </TableBodyRow>
        {/if}
      {/each}
    </TableBody>
  </Table>
</div>
