<template>
    <div class="tb-map-filter-menu" :class="{ 'is-target': open }">
        <button
            @click="() => toggleOpenState()"
            class="tb-map-filter-menu__toggle"
            :class="{
                'tb-map-filter-menu__toggle--close': open,
                'tb-map-filter-menu__toggle--open': !open,
            }"
        >
            <template v-if="open">
                <svg aria-hidden="true" class="c-icon"><use xlink:href="#tb-map-close" /></svg>
            </template>
            <template v-else>
                <svg aria-hidden="true" class="c-icon"><use xlink:href="#tb-map-open" /></svg>
                <span v-if="lang.toggle">{{ lang.toggle }}</span>
            </template>
        </button>

        <div class="tb-map-filter-menu__body">
            <header
                v-if="lang.title || lang.topline"
                class="tb-map-filter-menu__header"
            >
                <span
                    v-if="useAlternativeMenuStyle && lang.topline"
                    class="tb-map-filter-menu__title-topline"
                >
                    {{ lang.topline }}
                </span>
                <h4
                    v-if="lang.title"
                    class="tb-map-filter-menu__title">
                    {{ lang.title }}
                </h4>
            </header>

            <ul class="tb-map-filter-menu__items" v-if="items && items.length > 0">
                <tb-map-filter-menu-item
                    :item="{ title: lang.allFilters, path: '/' }"
                    :current-filter="currentFilter"
                    @activate="item => $emit('activate', item)"
                >
                    <template v-slot:icon>
                        <div class="tb-map-filter-item__icon">
                            <svg class="c-icon" aria-hidden="true">
                                <use xlink:href="#tb-map-select-all" />
                            </svg>
                        </div>
                    </template>
                </tb-map-filter-menu-item>

                <tb-map-filter-menu-item
                    v-for="(item, index) in items"
                    :key="index"
                    :item="item"
                    :current-filter="currentFilter"
                    @activate="filter => $emit('activate', filter)"
                />
            </ul>

            <div class="tb-map-filter-menu__action">
                <button
                    data-toubiz-map-filter-menu-confirm
                    @click="() => toggleOpenState()"
                    class="tb-map-filter-menu__confirm-button c-button c-button--ghost c-button--secondary"
                >
                    {{ lang.mobileConfirm }}
                </button>
            </div>
        </div>
    </div>
</template>
<script>
import TbMapFilterMenuItem from './filter-menu-item.vue';
export default {
    name: 'TbMapFilterMenu',
    components: { TbMapFilterMenuItem },

    props: {
        useAlternativeMenuStyle: { type: Boolean, required: true },
        lang: { type: Object, required: true },
        items: { type: Array, required: true },
        currentFilter: {
            required: true,
            validator: value => typeof value === 'object' || value === null,
        },
    },

    data: () => ({
        open: true,
    }),

    methods: {
        /**
         * Toggles / sets the current open state of the filter menu.
         * If a boolean is passed, the state will be set to that state.
         * If no boolean is passed, then the state is toggled (set to the opposite of
         * the current state).
         *
         * Waits 150ms for open/close transition to end and then emits the
         * toggle event. Used for example by toubiz-map to trigger leaflet map
         * size invalidation.
         * (This is tied to the 140ms transition-duration defined via CSS
         * on tb-map-filter-menu__body)
         *
         * This method may be called from the outside.
         */
        toggleOpenState(open = !this.open) {
            this.open = open;
            setTimeout(() => {
                this.$emit('toggle');
            }, 150);
        },
    },
};
</script>
