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

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

    $: activeField = [...schema.fields, ...systemFields].find(
        (f) => f.name === sort || "-" + f.name === sort || "data." + f.name === sort || "-data." + f.name === sort
    );

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

    function sortField(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.includes(el => el.name === field.name) ? "" : "data.";
        return sortField(prefix + field.name);
    }

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

<div class=" ">
    <button
        class="btn btn-sm btn-outline-primary dropdown-toggle d-flex align-items-center"
        type="button"
        data-bs-toggle="dropdown"
        data-bs-auto-close="outside"
        aria-expanded="false"
    >
        {#if sort.startsWith("-")}
            <Icon icon="arrow-down-wide-short"/>
        {:else}
            <Icon icon="arrow-up-short-wide"/>
        {/if}
        <span class="ms-1">{activeField.label}</span>
    </button>
    <div class="dropdown-menu" style="width:auto;max-width:800px;">
        <div class="row">
            {#each sortableFields as field}
                <div class="col-4 px-3 py-1 d-flex align-items-center">
                    <div class="btn-group w-100">
                        <button
                            on:click={(e) => sortAsc(e, field)}
                            title="Sort Ascending"
                            class="btn btn-sm {field.name == sort
                                ? 'btn-primary'
                                : 'btn-outline-primary'} "
                        >
                            <Icon icon="arrow-up-short-wide"/>
                        </button>
                        <button
                            on:click={(e) => sortDesc(e, field)}
                            title="Sort Descending"
                            class="btn btn-sm {'-' + field.name == sort
                                ? 'btn-primary'
                                : 'btn-outline-primary'} "
                        >
                            <Icon icon="arrow-down-wide-short"/>
                        </button>
                        <button
                            title="Sort Ascending"
                            on:click={(e) => sortAsc(e, field)}
                            class="btn btn-sm btn-outline-primary w-100 text-nowrap"
                            style="overflow: hidden;"
                        >
                            {field.label}
                        </button>
                    </div>
                </div>
            {/each}
        </div>
        <h6 class="dropdown-header px-0">System</h6>
        <div class="row">
            {#each systemFieldsFiltered as field}
                <div class="col-4 px-3 py-1 d-flex align-items-center">
                    <div class="btn-group w-100">
                        <button
                            on:click={(e) => sortAsc(e, field)}
                            title="Sort Ascending"
                            class="btn btn-sm {field.name == sort
                                ? 'btn-primary'
                                : 'btn-outline-primary'} "
                        >
                            <Icon icon="arrow-up-short-wide"/>
                        </button>
                        <button
                            on:click={(e) => sortDesc(e, field)}
                            title="Sort Descending"
                            class="btn btn-sm {'-' + field.name == sort
                                ? 'btn-primary'
                                : 'btn-outline-primary'} "
                        >
                            <Icon icon="arrow-down-wide-short"/>
                        </button>
                        <button
                            title="Sort Ascending"
                            on:click={(e) => sortAsc(e, field)}
                            class="btn btn-sm btn-outline-primary w-100 text-nowrap"
                            style="overflow: hidden;"
                        >
                            {field.label}
                        </button>
                    </div>
                </div>
            {/each}
        </div>
    </div>
</div>
