<script>
    import RecordRow from "./RecordRow.svelte";
    import { usernameById } from "../account/users";
    import { getContext } from "svelte";
    import Avatar from "../account/Avatar.svelte";
    import { selectRecord, toggleAll } from "./functions/recordSelect.js";
    import Checkbox from "../common/Checkbox.svelte";

    const channel = getContext("channel");

    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 = [];

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

    function select(record) {
        selected = selectRecord(record, selected);
    }
    console.log(schema);
    $: visibleColumns = schema.fields.filter(
        (c) => schema.visible?.includes(c.name) ?? [],
    );
</script>

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

                {#each visibleColumns as field}
                    <th
                        class="field-ui-{field.info.name ?? field.ui}"
                        class:is-sort={field.name === sortField.name}
                        scope="col"
                        title={field.help}>{field.label}</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 record (record.id)}
                <tr>
                    <td class="title-td">
                        <div class="title-td-contents">
                            {#if isWritable}
                                <Checkbox
                                    on:change={() => select(record)}
                                    checked={selected.find(
                                        (r) => r.id === record.id,
                                    )}
                                    value={record}
                                ></Checkbox>
                            {/if}

                            <a
                                href="{channel.lucentUrl}/records/{record.id}"
                                target={inModal ? "_blank" : "_self"}
                            >
                                {#if record.status === "draft"}
                                    <span
                                        style="text-transform: uppercase;font-size:10px"
                                        >{record.status}</span
                                    >
                                {/if}
                                {record.data.name}
                            </a>
                        </div>
                    </td>
                    <RecordRow
                        {record}
                        {graph}
                        {schema}
                        {visibleColumns}
                        {sortParam}
                        {sortField}
                        {users}
                    />
                    <td>
                        <Avatar
                            name={usernameById(users, record.updatedBy)}
                            side={24}
                        />
                    </td>
                </tr>
            {/each}
        </tbody>
    </table>
</div>
