<script>
    // import RecordRow from "./RecordRow.svelte";
    // import { previewTitle } from "../records/Preview";
    // import { usernameById } from "../account/users";
    // import Avatar from "../../common/Avatar.svelte";
    // import { selectRecord, toggleAll } from "./functions/recordSelect.js";
    // import Checkbox from "../common/Checkbox.svelte";
    // import Preview from "../files/Preview.svelte";
    // import { fileurl } from "../files/imageserver.js";
    import { getApp } from "../../app";

    let { channel, records = [], fields = [], inModal = false } = $props();
    let params = new URLSearchParams(document.location.search);
    let columns = $state(params.get("columns")?.split(",") || []);
    let visibleFields = $derived(fields.filter((f) => columns.includes(f.id)));
    // export let schema;
    // export let users;
    // export let records;
    // export let graph;
    // export let systemFields;
    // export let sortParam;
    // export let sortField;
    // export let inModal;
    // export let isWritable;
    // export let selected = [];
    const app = getApp();

    // function eventToggleAll(e) {
    //     selected = toggleAll(e, records, selected);
    // }

    // function select(record) {
    //     selected = selectRecord(record, selected);
    // }

    // $: visibleColumns = schema.fields.filter(
    //     (c) => schema.visible?.includes(c.name) ?? [],
    // );
</script>

<div class="table mt-5">
    <table>
        <thead>
            <tr>
                <!-- <th>
                    <Checkbox
                        value=""
                        on:change={eventToggleAll}
                        indeterminate={selected.length > 0 &&
                            selected.length < records.length}
                        checked={selected.length === records.length}
                    ></Checkbox>
                </th> -->
                <th>Title</th>

                {#each visibleFields as field}
                    <th scope="col" title={field.help}>{field.name}</th>
                {/each}
                <!-- {#each systemFields.filter( (c) => schema.visible?.includes(c.name), ) as sysField}
                    <th class:is-sort={sysField.name === sortField.name}
                        >{sysField.label}</th
                    >
                {/each} -->
                <!-- <th></th> -->
            </tr>
        </thead>
        <tbody>
            {#each records as qRecord (qRecord.record.id)}
                <tr>
                    <td class="title-td">
                        <div class="title-td-contents">
                            <!-- <Checkbox
                                on:change={() => select(record)}
                                checked={selected.find(
                                    (r) => r.id === record.id,
                                )}
                                value={record}
                            ></Checkbox> -->

                            <a
                                href="{app.url('records/')}{qRecord.record.id}"
                                target={inModal ? "_blank" : "_self"}
                            >
                                <!-- {#if record.status === "draft"}
                                    <span
                                        style="text-transform: uppercase;font-size:10px"
                                        >{record.status}</span
                                    >
                                {/if} -->
                                <!-- {previewTitle(channel.schemas, record, graph)} -->
                                {qRecord.recordPreview.title}
                            </a>
                        </div>
                    </td>
                    {#each visibleFields as field}
                        <td>
                            {qRecord.data.find((f) => f.fieldId === field.id)
                                ?.value}

                            <ul>
                                {#each qRecord.children.filter((e) => e.edge.fieldId === field.id) as child}
                                    <li>{child.recordPreview.title}</li>
                                {/each}
                            </ul>
                        </td>
                    {/each}
                    <!-- <RecordRow
                        {record}
                        {graph}
                        {schema}
                        {visibleColumns}
                        {sortParam}
                        {sortField}
                        {users}
                    /> -->
                    <!-- <td>
                        <Avatar
                            name={usernameById(users, record._sys.updatedBy)}
                            side={24}
                        />
                    </td> -->
                </tr>
            {/each}
        </tbody>
    </table>
</div>
