import Sortable from 'sortablejs'
import Vue from 'vue'

/**
 * The sortableListElement will get an SortableJs instance attached to it.
 * The onUpdate function hooks into sortable.Js onUpdate function for example.
 *
 * Use it like this on your element: <div class="ui cards" id="list" v-sortable:persons="{ animation: 200 }">
 *
 * @see https://github.com/SortableJS/Sortable
 */
Vue.directive( "sortable", function(el, bindings, vnode ) {
    const sortableJsOptions = bindings.value || {}
    let key = bindings.arg; //The data key of the vue instance that references the items in sortableListElement. In the example above, "persons" is used

    sortableJsOptions.onUpdate = function( e ) {
        let array = vnode.context[ key ];
        let target = array[ e.oldIndex ];

        array.splice( e.oldIndex, 1)
        array.splice( e.newIndex, 0, target );
        vnode.context.$emit( "sort", target, e.oldIndex, e.newIndex );
    };

    Sortable.create( el, sortableJsOptions );
});