<template>
    <div class="dd-container">
        <slot name="trigger"></slot>
        <div class="dd-content"
             :dir="direction"
             :style="contentStyle"
             :class="contentClass">
            <div class="dd-content-header text-center p-2">
                <div class="dd-content-inner pt-2">
                    <slot name="header"></slot>
                </div>
            </div>
            <div class="dd-content-items">
                <div class="dd-content-inner">
                    <div class="dd-content-scrollable"
                         :style="{'max-height': this.maxHeight}">
                        <div v-for="(item, index) in items"
                             :key="`${item}_${index}`"
                             class="dd-item"
                             @click="$emit('selected', item)">
                            <slot v-bind:item="item"></slot>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dd-content-footer text-center p-2">
                <div class="dd-content-inner pt-2">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            default: false
        },
        items: {
            default() {
                return [];
            }
        },
        minWidth: {
            default: '150px'
        },
        maxWidth: {
            default: "400px"
        },
        width: {
            default: '100%'
        },
        maxHeight: {
            default: "250px"
        },
        /**
         * ltr or rtl
         */
        direction: {
            default: 'ltr'
        }
    },
    data() {
        return {
            v: false
        };
    },
    mounted() {
        this.update();
    },
    computed: {
        contentClass() {
            return [
                `dd-content-${this.direction}`
            ];
        },
        contentStyle() {
            return {
                display: this.v ? 'table' : 'none',
                'max-width': this.maxWidth,
                'min-width': this.minWidth,
                width: this.width
            };
        },
    },
    methods: {
        update() {
            this.v = this.value;
        }
    },
    watch: {
        value() {
            this.update();
        }
    }
}
</script>