<template>
    <nav class="bg-white drop-shadow-sm">
        <div class="mx-auto px-4 md:max-w-[90%] sm:px-6">
            <div class="flex h-16 items-center justify-between">
                <div class="flex items-center h-full">
                    <div
                        class="shrink-0 hover:cursor-pointer"
                        id="vubLogo"
                        @click="logoClicked()">
                        <VUBLogo class="h-10 w-10" />
                    </div>
                    <div class="hidden md:block">
                        <div class="ml-10 flex">
                            <div
                                v-for="(item, index) in menuItems"
                                :key="item.label"
                                :id="`menuItem${index}`"
                                class="h-16 px-4 flex items-center hover:bg-softblue cursor-pointer transition duration-200"
                                @click="openMenu = false; item.onClick()">
                                <span class="text-blue text-sm font-semibold">{{ item.label }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center">
                    <component
                        v-if="localeChangerComponent"
                        :is="localeChangerComponent" />

                    <div
                        class="relative z-50"
                        v-if="profileTab">
                        <div
                            class="flex items-center cursor-pointer transition duration-200"
                            :class="openProfile ? 'bg-softblue' : 'hover:bg-softblue'"
                            ref="profileTab"
                            id="profileTab"
                            @click="openProfile ? hideProfile() : showProfile()">
                            <div class="flex items-center h-16 pl-4 pr-4 md:pr-2">
                                <ProfileIcon2
                                    class="w-6 h-6 text-blue"
                                    :stroke-width="42" />
                            </div>
                            <p
                                v-if="profileData?.length > 0"
                                class="hidden md:block text-sm text-blue pr-4 font-semibold">
                                {{ profileData[0] }}
                            </p>
                        </div>

                        <Transition
                            class="ease-in-out transition-all duration-300"
                            enter-from-class="transform -translate-y-5 opacity-0"
                            enter-to-class="transform translate-y-0 opacity-100"
                            leave-from-class="transform translate-y-0 opacity-100"
                            leave-to-class="transform -translate-y-5 opacity-0">
                            <div
                                v-if="openProfile"
                                class="absolute top-[72px] -right-7 w-fit max-w-4/5 py-4 px-8 bg-white rounded-lg shadow-lg z-50"
                                ref="profileWindow">


                                <div class="space-y-2">
                                    <div class="flex flex-col items-center">
                                        <div class="flex w-16 h-16 bg-slate-300 rounded-full">
                                            <ProfileIcon2 class="w-10 h-10 text-white m-auto" />
                                        </div>
                                    </div>
                                    <div
                                        class="flex flex-col w-full text-center text-nowrap"
                                        v-if="profileData?.length > 0">
                                        <p
                                            v-for="(data, i) in profileData"
                                            :id="`profileData${i}`"
                                            class="text-sm text-gray-400 text-nowrap first:text-base first:text-gray-800">{{ data }}</p>
                                    </div>

                                    <slot v-if="$slots.default" />

                                    <SmallButton
                                        text="Logout"
                                        class="flex mx-auto"
                                        id="logoutBtn"
                                        :pressed="logout" />
                                </div>
                            </div>
                        </Transition>
                    </div>

                    <div
                        class="flex md:hidden"
                        v-if="menuItems.length > 0">
                        <!-- Mobile menu button -->
                        <button
                            @click="openMenu = !openMenu"
                            type="button"
                            class="inline-flex items-center justify-center rounded-md p-2 text-blue"
                            aria-controls="mobile-menu"
                            aria-expanded="false">
                            <span class="sr-only">Open menu</span>
                            <HamburgerMenuIcon
                                v-if="!openMenu"
                                class="h-6 w-6" />
                            <CloseIcon
                                v-if="openMenu"
                                class="h-6 w-6" />
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div
            v-if="openMenu"
            class="pb-2 md:hidden"
            id="mobile-menu">
            <div
                v-for="(item, index) in menuItems"
                :key="item.link"
                :id="`menuItem${index}`"
                class="px-4 py-3 w-full block text-sm font-semibold text-blue cursor-pointer hover:bg-softblue transition duration-200"
                @click="openMenu = false; item.onClick()">
                <span class="text-blue text-sm font-semibold">{{ item.label }}</span>
            </div>
        </div>
    </nav>
</template>

<script>
/**
 * @group page
 * creates a header with logo
 */
export default {
    name: "VUBHeader",
    //will emit event 'logoClicked'
    emits: ['logoClicked'],
    props: {
        /**
         * optionally add menuitems
         * ```
         <VUBHeader
         :menuItems="[
         {
         label: 'End users license agreement',
         onClick: (){
         //nav action
         },
         },
         {
         label: 'Catalogue',
         onClick: () =>{
         //nav action
         },
         },
         {
         label: 'Overview of active licenses',
         onClick: (){
         //nav action
         $router.push({path:'/licenses'})
         },
         }
         ]"
         />
         ```
         */
        menuItems: {
            type: Array,
            default: () => []
        },
        //what should happen when the vub logo is clicked
        logoClicked: {
            type: Function,
            default: () => window.location='https://vub.be'
        },
        //optional locale changer component to be placed in the top right corner
        localeChangerComponent: {
            type: Object,
            default: null
        },
        profileTab: {
            type: Boolean,
            default: false
        },
        profileData: {
            type: Array,
            default: () => []
        },
        logoutUrl: {
            type: String,
            default: '/logout'
        }
    },
    data() {
        return {
            openMenu: false,
            openProfile: false,
        }
    },
    methods: {
        showProfile() {
            this.openProfile = true;
            document.addEventListener('click', this.handleOutsideClick);
        },
        hideProfile() {
            this.openProfile = false;
            document.removeEventListener('click', this.handleOutsideClick);
        },
        handleOutsideClick(event) {
            if (!this.$refs.profileTab.contains(event.target)
                && !this.$refs.profileWindow.contains(event.target)) {
                this.hideProfile();
            }
        },
        logout() {
            window.location = this.logoutUrl;
        }
    }
}
</script>