<template>
    <div class="w-100"
         :dir="dir">
        <draggable class="dragger-list-group"
                   :list="list"
                   :group="group"
                   @start="started"
                   @end="ended"
                   handle=".handle"
                   v-bind="{ animation: 500, group: group, disabled: false, ghostClass:'ghost'}">
            <transition-group type="transition"
                              :name="!dragging ? 'flip-list' : null">
                <div class="dragger-list-group-item d-flex align-items-center"
                     v-for="(a, index) in list"
                     :key="keyProp === undefined || keyProp === null || keyProp.length === 0 ? index : a[keyProp]">
                    <span class="handle"
                          :style="`font-size: ${iconSize}`">&#8801;</span>
                    <span class="flex-grow-1 mx-2">
                        <slot v-bind:item="a"
                              v-bind:index="index">
                            {{ valueProp === undefined || valueProp === null || valueProp.length === 0 ? a : a[valueProp] }}
                        </slot>
                    </span>
                    <span style="cursor:pointer"
                          :style="delStyles"
                          class="h-100"
                          v-if="canDelete">
                        <button type="button"
                                class="close align-middle h-100"
                                @click="() => onDelete(a, index)">
                            <span aria-hidden="true"
                                  class="align-middle">&times;</span>
                        </button>
                    </span>
                </div>
            </transition-group>
        </draggable>
    </div>
</template>
<script>
import draggable from "vuedraggable";
import { cultureManager } from "libj-core";
export default {
    components: {
        draggable
    },
    props: {
        list: {
            default() {
                return [];
            }
        },
        group: {
            default: 'a'
        },
        keyProp: {
            default: null
        },
        valueProp: {
            default: null
        },
        canDelete: {
            default: false
        },
        iconSize: {
            default: '24px'
        },
        direction: {
            default: ''
        }
    },
    data() {
        return {
            dragging: false
        };
    },
    computed: {
        delStyles() {
            return `margin-${(this.dir === 'rtl' ? 'right' : 'left')}: auto`;
        },
        dir() {
            return this.direction === undefined || this.direction === null || this.direction.length === 0 ?
                cultureManager.getActiveCulture().direction : this.direction;
        }
    },
    methods: {
        started() {
            this.dragging = true;
            this.$emit('start');
        },
        ended() {
            this.dragging = false;
            this.$emit('end');
        },
        onDelete(a, i) {
            var args = {
                cancel: false,
                item: a,
                index: i
            };
            this.$emit('delete', args);
            if (!args.cancel) {
                this.list.splice(i, 1);
            }
        }
    }
}
</script>