<template>
    <div class="c2-dropdown-menu relative">
        <button
            ref="trigger"
            class="trigger relative z-20"
            @click="toggleDropdown"
            :class="[
                buttonClasses,
                { 'is-open' : isOpen }
            ]"
            aria-haspopup="true"
            :aria-expanded="isOpen ? 'true' : 'false'"
        >

            <span 
                class="text" 
                :data-value="active.id"
            >
                {{ active.name }}
            </span>

            <slot name="icon"></slot>
        </button>

        <ul
            class="list absolute z-10 top-full left-0 list-none"
            role="menu"
            :aria-label="menuLabel"
            :class="[
                listClasses,
                menuPosition,
                isOpen ? 'opacity-1 visible translate-x-0 translate-y-0' : 'opacity-0 invisible translate-x-0 -translate-y-1/4'
            ]"
            aria-orientation="vertical"
        >
            <li
                v-for="(option, id) in options"
                :key="id"
                class="list-item"
                :class="[
                    listItemClasses,
                    { 'is-active': option == active }
                ]"
                @click="activateItem(option)"
                @keydown.enter.space="activateItem(option)"
                @keydown.esc="toggleDropdown"
                role="menuitem"
                tabindex="0"
            >
                {{ option.name }}
            </li>
        </ul>

    </div>
</template>

<script>

    export default {
        name: 'C2DropdownMenu',
        props: {
            options: {
                type: Array,
                default() {
                    return []
                }
            },
            firstActive: {
                type: Number,
                default: 0
            },            
            // support v-model:
            value: {
                type: String || Number,
                default: null
            },
            isClosed: {
                type: Boolean
            },
            menuLabel: {
                type: String,
                default: ''
            },
            autoClose: {
                type: Boolean,
                default: true
            },
            menuPosition: {
                type: String,
                default: 'position-below'
            },
            buttonClasses: {
                type: String,
                default: null
            },
            listClasses: {
                type: String,
                default: null
            },
            listItemClasses: {
                type: String,
                default: null
            }
        },
        data() {
            return {
                isOpen: false,
                active: this.options[this.firstActive],
                trigger: null,
                autoCloseInternal: this.autoClose
            }
        },
        watch: {
            isClosed() {
                if (this.isClosed) {
                    this.isOpen = false;
                }
            }
        },
        mounted() {
            this.trigger = this.$refs.trigger;
            // support v-model:
            if (this.value !== null) {
                // we're using v-model, initialize the dropdown
                let initialValue = this.options.find(option => {
                    return option.id === this.value;
                });
                // if the v-model initial value is defined in options
                if (initialValue !== undefined) {
                    // set it as active
                    this.active = initialValue;
                } else {
                    // if not, then set the first option as active
                    // and emit the value so it is set on the model
                    this.activateItem(this.options[0]);
                    // close the dropdown
                    this.toggleDropdown();
                    // blur the trigger button
                    this.$refs.trigger.blur();
                }
            }
        },
        methods: {
            toggleDropdown() {
                this.isOpen = !this.isOpen;
            },
            activateItem(option) {
                this.active = option;
                if (this.autoCloseInternal) {
                    this.toggleDropdown();
                }
                this.trigger.focus();
                this.$emit('item-selected', option.id);
                // support v-model:
                this.$emit('input', option.id);
            }
        }
    }
</script>

<style lang="scss">

    .c2-dropdown-menu {
        
        .list {
            transition: 
                opacity 0.3s ease-in-out,
                visibility 0.3s ease-in-out,
                transform 0.3s ease-in-out;

            &.position-right {
                top: 0;
                left: 100%;
                transform: translate(-10%, 0);

                &.is-open {
                    transform: translate(0,0);
                }
            }

            .list-item {
                cursor: pointer;

                &.is-active {
                    display: none;
                }
            }
        }
    }

</style>

