<template>
    <div>
        <div class="yo-dropdown-body uk-overflow-auto uk-height-max-large">
            <ul class="uk-nav uk-dropdown-nav">
                <template v-for="(opts, group, i) in optionsList">
                    <li v-if="group" :key="`header-${group}`" class="uk-nav-header">
                        {{ $t(group) }}
                    </li>

                    <li
                        v-for="opt in opts"
                        :key="opt.name"
                        :class="{ 'uk-active': selected && opt.name === selected.name }"
                        @click.prevent="$emit('select', opt)"
                    >
                        <a href>
                            <div>
                                <span>{{ $t(opt.title) }}</span>
                                <span
                                    v-if="opt.meta"
                                    class="uk-text-meta uk-margin-small-left"
                                    v-text="opt.meta"
                                ></span>
                            </div>
                        </a>
                    </li>

                    <li
                        v-if="++i !== Object.keys(optionsList).length"
                        :key="`divider-${group}`"
                        class="uk-nav-divider"
                    ></li>
                </template>
            </ul>
        </div>
    </div>
</template>

<script>
import { groupBy } from '../../../util';

export default {
    name: 'DynamicDropdownOptions',

    props: {
        options: Array,
        selected: Object,
    },

    computed: {
        optionsList() {
            const options = [...this.options].sort((a, b) =>
                (a.priority || 0) > (b.priority || 0) ? -1 : 0
            );

            return groupBy(options, 'group');
        },
    },
};
</script>
