<script>
    import FilterFields from "./FilterFields.svelte";
    import Uploader from "../../files/Uploader.svelte";
    import Icon from "../../common/Icon.svelte";
    import SortFields from "./SortFields.svelte";
    import AppliedFilter from "./AppliedFilter.svelte";
    import {createEventDispatcher, getContext} from "svelte";
    import Dropdown from "../../common/Dropdown.svelte";

    const channel = getContext("channel");

    const dispatch = createEventDispatcher();
    export let sortParam;
    export let sortField;
    export let schema;
    export let operators;
    export let filter;
    export let inModal;
    export let modalUrl;
    export let isWritable;
    export let records;
    export let graph;
    export let systemFields = [];
    // export let visibleFields = [];

    let url = new URL(window.location.href);

    let csvUrl = url.pathname + "/csv?" + url.searchParams.toString();

    function search(e) {
        e.preventDefault();
        const data = new FormData(e.target);
        let filterKey = data.keys().next().value;
        let filterValue = data.values().next().value;
        const url = new URL(modalUrl ?? window.location.href);
        url.searchParams.set("skip", "0");
        url.searchParams.set(filterKey, filterValue);
        if (inModal) {
            dispatch("refresh", url);
        } else {
            window.location = url;
        }

    }

    function uploadComplete(e) {
        records = e.detail;
    }
</script>

<div class="toolbar">
    <div class="toolbar-filters">

        <SortFields
                {schema}
                {sortParam}
                {sortField}
                {systemFields}
                {inModal}
                {modalUrl}
                on:refresh
        />


        <FilterFields
                bind:schema
                {systemFields}
                {operators}
                {filter}
                {inModal}
                {modalUrl}
                on:refresh
        />

        <form method="GET" on:submit={search}>
            <input type="search" name="filter[search_regex]" placeholder="Search"
                   class="search" required>
        </form>


    </div>

    <div style="display:flex;align-items: center;gap:4px">
        {#if schema.type === "collection"}
            {#if !inModal && isWritable}
                <a
                        href="{channel.lucentUrl}/records/new?schema={schema.name}"
                        class="button"
                >
                    New Record
                </a>
            {/if}
        {:else }
            <div>
                <Uploader {schema} on:uploadComplete={uploadComplete}/>
            </div>
        {/if}
        {#if !inModal}
            <Dropdown orientation="right">
                <div slot="button">
                    <Icon icon="ellipsis-vertical"/>
                </div>
                {#if filter["status_in"] === "trashed"}
                    {#if isWritable}
                        <a
                                class="dropdown-item"
                                href="{channel.lucentUrl}/content/{schema.name}/emptyTrash"
                        >
                            Empty trash
                        </a>
                    {/if}
                {:else}

                    <a
                            class="dropdown-item"
                            href={csvUrl}
                    >Export to CSV</a
                    >
                    <a
                            class="dropdown-item"
                            href="{channel.lucentUrl}/content/{schema.name}?filter[status_in]=trashed"
                    >View trashed records</a
                    >
                    <a
                            class="dropdown-item"
                            href="{channel.lucentUrl}/content/{schema.name}?notlinked=*"
                    >View unlinked records</a
                    >
                {/if}
            </Dropdown>

        {/if}
    </div>
</div>


{#if Object.entries(filter).length > 0}
    <div class="applied-filters">
        {#each Object.entries(filter) as [k, v]}
            <AppliedFilter
                    {schema}
                    {operators}
                    key={k}
                    value={v}
                    {inModal}
                    {modalUrl}
                    {graph}
                    on:refresh
            />
        {/each}
    </div>
{/if}

