<script>
    import Tools from "./tools/Tools.svelte";
    import Pagination from "./pagination/Pagination.svelte";
    import ActionsOnSelected from "./ActionsOnSelected.svelte";
    import Preview from "../files/Preview.svelte";
    import Table from "./Table.svelte";
    import {getContext} from "svelte";

    const channel = getContext("channel");
    export let schema;
    export let users;
    export let records;
    export let graph;

    // export let visibleFields;
    export let systemFields;
    export let sort;
    export let operators;
    export let filter;
    export let limit;
    export let skip;
    export let total;
    export let inModal;
    export let modalUrl;
    export let selected = [];
    export let isWritable = false;


    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];
        }
    }

    function refresh(e) {
        const newUrl = e.detail;
        axios
            .get(newUrl)
            .then((response) => {
                records = response.data.records;
                sort = response.data.sort;
                operators = response.data.operators;
                filter = response.data.filter;
                skip = response.data.skip;
                limit = response.data.limit;
                total = response.data.total;
                modalUrl = response.data.modalUrl;
            })
            .catch((error) => {
                console.log(error);
            });
    }
</script>

<div class="wrapper-large transparent ">
    <!-- <Manager managerRecords={recordHistory} {schemas} /> -->

    <div class="lx-card  mb-4  {inModal ? 'mt-0' : 'mt-5'}">
        <h3 class="header-normal mb-5 ">
            {schema.label}
        </h3>
        {#if selected.length > 0 && !inModal && isWritable}
            <ActionsOnSelected {schema} {selected} {inModal} {filter}/>
        {:else}
            <Tools
                    bind:schema
                    bind:records
                    {systemFields}
                    {sort}
                    {operators}
                    {filter}
                    {inModal}
                    {modalUrl}
                    {isWritable}
                    on:refresh={refresh}
            />
        {/if}

        {#if schema.type === "collection"}
            <Table
                    {records}
                    {graph}
                    {schema}
                    {sort}
                    {systemFields}
                    {inModal}
                    {users}
                    {isWritable}
                    bind:selected
            />
        {:else}
            <div class="row" style="max-width:1000px">
                {#each records as record (record.id)}
                    <div class="col-6 col-md-4">
                        <div
                                class="file-wrapper rounded p-2 mb-4 bg-light"
                                class:selected={selected.includes(record)}
                        >
                            {#if isWritable}
                                <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>
                            {/if}
                            <div class="d-flex justify-content-center">
                                <Preview {record} size="medium"/>
                            </div>

                            <a
                                    href="{channel.lucentUrl}/records/{record.id}"
                                    title={record._file.path}
                                    class="d-block text-center overflow-hidden text-nowrap my-2 "
                                    style="
                                        text-overflow: ellipsis;
                                        font-size: 13px;
                                        color: #333;
                                    ">{record._file.path}</a
                            >
                            <span
                                    class="lx-small-text text-muted d-block text-center"
                            >{record._file.mime}</span
                            >
                        </div>
                    </div>
                {/each}
            </div>
        {/if}
    </div>

    <Pagination
            {limit}
            {skip}
            {total}
            on:refresh={refresh}
            {inModal}
            {modalUrl}
    />
</div>

<style>
    .form-check {
        display: inline-block;
        margin-bottom: 0;
    }
</style>
