<script>
    import Sortable from "sortablejs";
    import { onMount, createEventDispatcher } from "svelte";
    export let sortableClass;
    // export let handle;
    export let isTable = false;
    export let sortableInstance;
    const dispatch = createEventDispatcher();
    let sortableContainer;

    onMount(() => {
        let options = {
            // handle: ".sortable-handle",
            // draggable: ".quote-line-wrapper",
            // filter: ".not-draggable", // Selectors that do not lead to dragging (String or Function)
            // preventOnFilter: true,
            animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
            easing: "cubic-bezier(1, 0, 0, 1)",
            onUpdate: function (/**Event*/ evt) {
                // reorder(evt.oldIndex,evt.newIndex);
                dispatch("update", {
                    source: evt.oldIndex,
                    target: evt.newIndex,
                });
            },
            onMove(event) {
                // if (event.related.className.indexOf("not-draggable") > -1) {
                //     return false;
                // }
            },
        };

        // if (handle) {
        //     options.handle = handle;
        // }
        sortableInstance = Sortable.create(sortableContainer, options);
    });

    // function reorder(from, to) {
    //     let newList = JSON.parse(JSON.stringify(value));
    //     let fromElem = newList[from];
    //     newList.splice(from, 1);
    //     newList.splice(to, 0, fromElem);
    //     value = newList;
    //     dispatch("reordered", value);
    // }
</script>

{#if isTable}
<tbody class="sortable-container {sortableClass}" bind:this={sortableContainer}>
    <slot />
</tbody>
{:else}
<div class="sortable-container {sortableClass}" bind:this={sortableContainer}>
    <slot />
</div>
{/if}

