<script>
    import Icon from "../../common/Icon.svelte";
    import {createEventDispatcher} from "svelte";
    import Dropdown from "../../common/Dropdown.svelte";

    const dispatch = createEventDispatcher();
    export let schema;
    export let sortParam;
    export let sortField;
    export let inModal;
    export let modalUrl;
    export let systemFields = [];

    $: sortableFields = schema.fields.filter(
        (f) => !["reference", "file", "json", "id", "rich", "markdown", "block"].includes(f.info.name)
    );
    $: systemFieldsFiltered = systemFields;
    $: if (schema.type === "collection") {
        systemFieldsFiltered = systemFields.filter((f) => f.files === false);
    }


    function triggerSortField(fieldSort) {
        const url = new URL(modalUrl ?? window.location.href);
        url.searchParams.set("sort", fieldSort);
        if (inModal) {
            dispatch("refresh", url);
        } else {
            window.location = url;
        }
    }

    function sortAsc(e, field) {
        e.preventDefault();
        let prefix = systemFields.map((el) => el.name).includes(field.name) ? "" : "data.";
        return triggerSortField(prefix + field.name);
    }

    function sortDesc(e, field) {
        e.preventDefault();
        let prefix = systemFields.map((el) => el.name).includes(field.name) ? "" : "data.";
        return triggerSortField("-" + prefix + field.name);
    }
</script>


<Dropdown>
    <div slot="button">
        {#if sortParam.startsWith("-")}
            <Icon icon="arrow-down-wide-short"/>
        {:else}
            <Icon icon="arrow-up-short-wide"/>
        {/if}
        <span class="ms-1">{sortField.label}</span>
    </div>
    <div>
    {#each sortableFields as field}
        <div class="dropdown-item">
            <button
                    on:click={(e) => sortAsc(e, field)}
                    title="Sort Ascending"
                    class="button button-icon {field.name == sortField.name   && !sortParam.startsWith("-")
                                ? 'active'
                                : ''} "
                        >


            <Icon icon="arrow-up-short-wide"/>
            </button>
            <button
                    on:click={(e) => sortDesc(e, field)}
                    title="Sort Descending"
                    class="button button-icon  {field.name == sortField.name && sortParam.startsWith("-")
                                ? 'active'
                                : ''} "
                        >


            <Icon icon="arrow-down-wide-short"/>
            </button>
            <button
                    title="Sort Ascending"
                    on:click={(e) => sortAsc(e, field)}
                    class="button"
            >
                {field.label}
            </button>
        </div>
    {/each}
    <h6 class="dropdown-header">System</h6>
    {#each systemFieldsFiltered as field}
        <div class="dropdown-item">

            <button
                    on:click={(e) => sortAsc(e, field)}
                    title="Sort Ascending"
                    class="button  button-icon  {field.name == sortParam
                                ? 'active'
                                : ''} "
            >
                <Icon icon="arrow-up-short-wide"/>
            </button>
            <button
                    on:click={(e) => sortDesc(e, field)}
                    title="Sort Descending"
                    class="button button-icon  {'-' + field.name == sortParam
                                ? 'active'
                                : ''} "
            >
                <Icon icon="arrow-down-wide-short"/>
            </button>
            <button
                    title="Sort Ascending"
                    on:click={(e) => sortAsc(e, field)}
                    class="button"
            >
                {field.label}
            </button>
        </div>
    {/each}
    </div>
</Dropdown>
