<script lang="ts">
    import {
        createRender,
        createTable,
        Render,
        Subscribe,
    } from "svelte-headless-table"
    // @ts-ignore
    import { addSortBy } from "svelte-headless-table/plugins"
    import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
    import WebsiteLink from "./WebsiteLink.svelte"

    //when adding sort here is code { sort: addSortBy() }
    const table = createTable(tableItems, { sort: addSortBy() })

    const columns = table.createColumns([
        table.column({
            header: "Service Id",
            cell: ({ value }) => createRender(WebsiteLink, {id: value}),
            accessor: "id",
        }),
        table.column({
            header: "Anime Title",
            accessor: "title",
        }),
        table.column({
            header: "Service",
            accessor: "service",
        }),
        table.column({
            header: "Episode Progress",
            accessor: "progress",
        }),
        table.column({
            header: "Status",
            accessor: "status",
        }),
        table.column({
            header: "Started At",
            accessor: "startedAt",
        }),
        table.column({
            header: "Completed At",
            accessor: "completedAt",
        }),
        table.column({
            header: "Rating",
            accessor: "score",
        }),
        table.column({
            header: "Repeat",
            accessor: "repeat",
        }),
        table.column({
            header: "Notes",
            accessor: "notes",
        }),
    ])

    //add pluginStates when add sort back
    const { headerRows, rows, tableAttrs, tableBodyAttrs } =
        table.createViewModel(columns)
</script>

<div class="relative overflow-x-auto rounded-lg mb-5">
    <table
        class="w-full text-sm text-left rtl:text-right text-gray-400"
        {...$tableAttrs}
    >
        <thead class="text-xs uppercase bg-gray-700 text-gray-400">
            {#each $headerRows as headerRow (headerRow.id)}
                <Subscribe attrs={headerRow.attrs()} let:attrs>
                    <tr {...attrs}>
                        {#each headerRow.cells as cell (cell.id)}
                            <Subscribe
                                attrs={cell.attrs()}
                                let:attrs
                                props={cell.props()}
                                let:props
                            >
                                <th
                                    {...attrs}
                                    on:click={props.sort.toggle}
                                    class:sorted={props.sort.order !==
                                        undefined}
                                    class="px-6 py-3"
                                >
                                    <div>
                                        <Render of={cell.render()} />
                                        {#if props.sort.order === "asc"}
                                            ⬇️
                                        {:else if props.sort.order === "desc"}
                                            ⬆️
                                        {/if}
                                    </div>
                                </th>
                            </Subscribe>
                        {/each}
                    </tr>
                </Subscribe>
            {/each}
        </thead>
        <tbody {...$tableBodyAttrs}>
            {#each $rows as row (row.id)}
                <Subscribe attrs={row.attrs()} let:attrs>
                    <tr {...attrs} class="bg-gray-800 border-gray-700">
                        {#each row.cells as cell (cell.id)}
                            <Subscribe attrs={cell.attrs()} let:attrs>
                                <td {...attrs} class="px-6 py-4">
                                    <Render of={cell.render()} />
                                </td>
                            </Subscribe>
                        {/each}
                    </tr>
                </Subscribe>
            {/each}
        </tbody>
    </table>
</div>
