<script>
    import { getContext } from "svelte";
    import Icon from "../common/Icon.svelte";
    import Checkbox from "../common/Checkbox.svelte";
    import Preview from "../files/Preview.svelte";
    import { fileurl } from "../files/imageserver";

    const channel = getContext("channel");

    export let files = [];
    export let selected = [];
    export let isWritable = true;

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

    function select(file) {
        selected = selectFile(file, selected);
    }

    export const toggleAll = (e, files, selected) => {
        if (selected.length === files.length) {
            return [];
        }
        e.currentTarget.checked = selected.length > 0;
        return files;
    };

    export const selectFile = (file, selected) => {
        let fileExists = selected.find((r) => r.id === file.id);
        if (fileExists) {
            return selected.filter((r) => r.id !== file.id);
        }
        return [...selected, file];
    };
</script>

<div class="table mt-5">
    <table>
        <thead>
            <tr>
                {#if isWritable}
                    <th>
                        <Checkbox
                            value=""
                            on:change={eventToggleAll}
                            indeterminate={selected.length > 0 &&
                                selected.length < files.length}
                            checked={selected.length === files.length}
                        ></Checkbox>
                    </th>
                {/if}
                <th></th>
            </tr>
        </thead>
        <tbody>
            {#each files as file (file.id)}
                <tr>
                    <td class="title-td">
                        <div class="title-td-contents">
                            {#if isWritable}
                                <Checkbox
                                    on:change={() => select(file)}
                                    checked={selected.find(
                                        (s) => s.id === file.id,
                                    )}
                                    value={file}
                                ></Checkbox>
                            {/if}
                            <div class="file-table-row">
                                <Preview
                                    {file}
                                    size={file.width > 0 ? "medium" : "small"}
                                />

                                <div>
                                    {file.filename}
                                    <span
                                        >{(file.size / 1024).toFixed(1)}kB</span
                                    >

                                    {#if file.width > 0}
                                        <span
                                            >{file.width +
                                                "x" +
                                                file.height}</span
                                        >
                                    {/if}
                                    <a
                                        href={fileurl(channel, file)}
                                        target="_blank"
                                    >
                                        Download
                                    </a>
                                </div>
                            </div>
                        </div>
                    </td>
                    <!-- <RecordRow
                        {record}
                        {graph}
                        {schema}
                        {visibleColumns}
                        {sortParam}
                        {sortField}
                        {users}
                    /> -->
                    <!-- <td>
                        <Avatar
                            name={usernameById(users, record._sys.updatedBy)}
                            side={24}
                        />
                    </td> -->
                </tr>
            {/each}
        </tbody>
    </table>
</div>
