import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'ul',
    classNames: ['item-list'],
    didInsertElement() {
        let me = this;
        me._super(...arguments);
        me.set('prevIds', me.get('model').mapBy('id'));
        me.$().sortable({
            opacity: 0.8,
            revert: true,
            forceHelperSize: true,
            placeholder: 'draggable-placeholder',
            forcePlaceholderSize: true,
            tolerance: 'pointer',
            stop: function (event, ui) {
                // just for Chrome!!!! so that dropdowns on items don't appear below other items after being moved
                $(ui.item).css('z-index', 'auto');

                if (me.get('onSortStopped')) {
                    let prevIds = me.get('prevIds');
                    let changed = false;
                    let ids = Array.prototype.map.call(me.$('li'), (li, i) => {
                        let id = Ember.$(li).data('item-id');
                        if (id !== prevIds[i] && !changed) {
                            changed = true;
                        }
                        return id;
                    });
                    if (changed) {
                        me.set('prevIds', ids);
                        me.sendAction('onSortStopped', ids);
                    }
                } 
            }
        });
    }
});