<template>
    <div
        v-if="open"
        class="calendar-selection">
        <template
            v-for="(option, index) in getCalendarOptionData"
            :key="option.value">
            <calendarOptionButton
                :buttonLabel="option.buttonLabel"
                :value="option.value"
                @click="setSelectedCalendarOption(index)" />
        </template>
    </div>
</template>
<script>
import calendarOptionButton from './calendar-option-button/calendar-option-button.vue';
export default {
    name: 'calendar-option-selection',
    components: {
        calendarOptionButton
    },
    props: {
        calendarOptionsData: Array,
        open: Boolean
    },
    emits: ['calendar-option-selected'],
    computed: {
        getCalendarOptionData() {
            return this.calendarOptionsData.map((item) => ({
                value: item.name,
                buttonLabel: item.icon
            }));
        }
    },
    methods: {
        async setSelectedCalendarOption(index) {
            this.$emit('calendar-option-selected', index);
        }
    }
};
</script>
<style lang="scss" scoped>
.calendar-selection {
    position: absolute;
    z-index: 1;
    display: table;
    border: solid 1px #d4d6d8;
    border-radius: .25rem;
    background-color: #ffffff;
    box-shadow: 0 0 10px 0 rgba(88, 188, 233, 0.2);
}
</style>
