<script>
    import RecordRow from "./RecordRow.svelte";
    import {previewTitle} from "../records/Preview";
    import {usernameById} from "../account/users";
    import {getContext} from "svelte";
    import Avatar from "../account/Avatar.svelte";

    const channel = getContext("channel");

    export let schema;
    export let users;
    export let records;
    export let graph;
    export let systemFields;
    export let sort;
    export let inModal;
    export let selected = [];

    function toggleAll(e) {
        // e.preventDefault();
        if (selected.length === records.length) {
            selected = [];
        } else {
            selected = records;
        }
        e.currentTarget.checked = selected.length > 0;
    }

    function selectRecord(e, record) {
        let recordExists = selected.find((r) => r.id == record.id);

        if (recordExists) {
            selected = selected.filter((r) => r.id !== record.id);
        } else {
            selected = [...selected, record];
        }
    }

    $: visibleColumns = schema.fields.filter(c => schema.visible.includes(c.name))

</script>

<div class="lx-table rounded">
    <table class="">
        <thead class="table-light">
        <tr>
            <th>
                <input
                    on:change|preventDefault={toggleAll}
                    indeterminate={selected.length > 0 &&
                            selected.length < records.length}
                    checked={selected.length == records.length}
                    class="form-check-input"
                    type="checkbox"
                />
            </th>

            {#each visibleColumns as field}
                <th
                    class="field-ui-{field.ui}"
                    class:is-sort={"-" + field.name == sort ||
                            field.name == sort}
                    scope="col"
                    title={field.help}
                    data-bs-toggle="tooltip"
                    data-bs-placement="top">{field.label}</th
                >
            {/each}
            {#each systemFields.filter(c => schema.visible.includes(c.name)) as sysField}
                <th>{sysField.label}</th>
            {/each}
        </tr>
        </thead>
        <tbody>
        {#each records as record (record.id)}
            <tr>
                <td class="title-td">
                    <div
                        class="title-td-contents d-inline-flex justify-content-between w-100 align-items-center"
                    >
                        <div class="d-flex align-items-center ">
                            <div class="form-check">
                                <input
                                    on:change={(e) =>
                                            selectRecord(e, record)}
                                    class="form-check-input "
                                    type="checkbox"
                                    checked={selected.find(
                                            (r) => r.id === record.id
                                        )}
                                    value={record}
                                />
                            </div>

                            <a
                                class="me-2 text-decoration-none text-dark fs-6"
                                href="{channel.lucentUrl}/records/{record.id}"
                                target={inModal ? "_blank" : "_self"}
                            >
                                {previewTitle(channel.schemas, record, graph)}
                            </a>
                        </div>
                        <div>
                            <Avatar
                                name={usernameById(
                                        users,
                                        record._sys.updatedBy
                                    )}
                                side={24}
                            />
                        </div>
                    </div>
                </td>
                <RecordRow
                    {record}
                    {graph}
                    {schema}
                    {visibleColumns}
                    {sort}
                    {systemFields}
                    {inModal}
                    {users}
                />
            </tr>
        {/each}
        </tbody>
    </table>
</div>

<style>
    /* .title-td:hover {
        overflow: visible;
    }

    .title-td:hover .title-td-contents a {
        z-index: 1;
        box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 100%;
    } */
</style>
