<template>
    <div style="display: flex;
  flex-direction: column; width:80%" class=" mx-2 my-1 mb-3">
  
    <v-card 
    
    ref="menuContainer" elevation="0"
            v-click-outside="{
                handler: onClickOutside,
                include
            }"
      variant="flat">
        <v-list-item class="px-2">
        <!--<template v-slot:prepend>
            <v-avatar class="pl-3" size="48">🎯</v-avatar>
        </template>-->

        <template v-slot:title> 
            <div class="pa-0 pt-2 pb-2 scroll-container horizontal secondary" fluid style="overflow-x: auto; white-space: nowrap">
                <v-text-field
                    v-show="listing_menu"
                    density="compact"
                    label="Search Menu"
                    variant="outlined"
                    v-model="searchQuery" placeholder="Search menu..." @input="searchItems"
                    hide-details
                    single-line
                    @click:append-inner="onClick"
                    ref="searchInput"
                ></v-text-field>
                <v-btn
                    v-show="!listing_menu"
                    class="mr-2"
                    size="small"
                    :variant="active_menu.id === qmenu.id ? 'tonal' : 'text'"
                    v-for="qmenu in qmenus"
                    @click="redirect(qmenu)"
                >
                    {{ qmenu.name }}
                </v-btn>
            </div>
        </template>

        <template v-slot:append>
            <v-btn  @click="showHideListingMenu()" v-show="listing_menu == false" icon="mdi-magnify" variant="text"></v-btn>
            <v-btn  @click="showHideListingMenu()"  v-show="listing_menu === true" icon="mdi-close" variant="text"></v-btn>
        </template>
        </v-list-item>


        <v-card-text  v-if="listing_menu" class="text-medium-emphasis">
    
        <v-list variant="text" v-if="listing_menu">

                    <v-list-item
                       class="included"
                        v-for="(item, i) in limitedMenus"
                        :key="i"
                        :value="item"
                        color="primary"
                        @click="redirect(qmenu)"
     
                    >
                        <template v-slot:prepend>
                        <v-icon icon="mdi-arrow-forward"></v-icon>
                        </template>

                        <v-list-item-title v-text="item.name"></v-list-item-title>
                    </v-list-item>
                </v-list>
     
        </v-card-text>
    </v-card>
    </div>
</template>

<script type="module">
    export default {
        name: "QuickAccessComponent",
        mounted() {
            this.$store.dispatch('system/loadQuickMenu');
        },
        data() {
            return {
                pressed: false,
                listing_menu:false,
                searchQuery:'',
                clickOutsideEnabled: false,
            }
        },
        computed: {
            qmenus() {
                return this.$store.state.system.quick_menu;
            },
            active_menu: {
                get() {
                    return this.$store.state.system.active_menu;
                },
                set(menu) {
                    this.$store.commit("system/update_active_menu", menu);
                }
            },
            menus(){
                return this.$store.state.system.quick_menu;
            },
            limitedMenus: {
                get() {
                    return this.$store.state.system.active_menu;
                },
                set(menu) {
                    this.$store.commit("system/update_active_menu", menu);
                }
            }
        },
        methods: {
            redirect(item) {
                this.listing_menu = false
                this.active_menu = item;
                //console.log("redirect url ", item.url);
            },
            showHideListingMenu(){
                let xnow = this.listing_menu
                this.listing_menu = xnow?false:true
                this.$nextTick(() => {
                    if (this.listing_menu) {
                        this.$refs.searchInput.focus(); // Fokuskan input setelah menu ditampilkan
                    }
                });
            },
            searchItems() {
                this.limitedMenus = this.menus.filter(item => {
                    return item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ;
                });
            },
            onClickOutside () {
                this.listing_menu = false
            },
            include () {
                return [document.querySelector('.included')]
            },

        },
    }
</script>