<template>
  <v-app>
    <div class="m-0 flex flex-column h-screen">
      <Header @toggle-sidebar="toggleSidebar" class="fixed w-full z-50 top-0 p-2"></Header>
      <div class="flex flex-row relative">       
        <div
            @mouseenter="openSidebar"
            class="fixed left-0 top-0 h-full w-12 z-20"
            style="background: transparent;"
        ></div>
        
        <transition name="slide-fade">
          <div v-show="!hideSideBar"
               @mouseleave="startCloseSidebarTimer"
               @mouseenter="clearCloseSidebarTimer"
               class="w-48 fixed left-0 top-14 h-full border-r-2 bg-purple z-30 transition-transform duration-700">
            <SideBar></SideBar>
          </div>
        </transition>
        
        <div class="flex flex-col mt-16 bg-amber-50 w-full md:ml-1">
          <RouterView></RouterView>
          <Footer></Footer>
        </div>
      </div>

      <div class="fixed z-50 bottom-10 right-10 flex flex-column">
        <div
            v-if="showPopup"
            ref="popup"
            class="z-50 shadow-md shadow-gray-500 rounded-2xl"
        >
          <div class="bg-fuchsia-900 p-4 rounded-t-2xl font-semibold self-center text-white text-center">
            Je Soutiens!
          </div>
          <div class="bg-gray-100 rounded-b-2xl p-4">
            <div class="mx-2">
              <StripePayment></StripePayment>
            </div>
          </div>
        </div>

        <div
            @click="togglePopup"
            ref="popupButton"
            class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
            style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white;"
        >
          <v-icon class="text-2xl">mdi-gift-outline</v-icon>
        </div>
      </div>
    </div>
  </v-app>
</template>

<script setup>
import Header from "@/views/main/Header.vue";
import Footer from "@/views/main/Footer.vue";
import SideBar from "@/views/main/SideBar.vue";
import {ref, onMounted, onUnmounted} from 'vue';
import StripePayment from "@/views/StripePayment.vue";
import {eventBus} from '@/eventBus.js';

const hideSideBar = ref(false); 
const showPopup = ref(false);
const popup = ref(null);
const popupButton = ref(null);
let closeSidebarTimer = null;

const toggleSidebar = () => {
  hideSideBar.value = !hideSideBar.value;
};

const openSidebar = () => {
  clearCloseSidebarTimer();
  hideSideBar.value = false;
};

const startCloseSidebarTimer = () => {
  closeSidebarTimer = setTimeout(() => {
    hideSideBar.value = true;
  }, 500); 
};

const clearCloseSidebarTimer = () => {
  clearTimeout(closeSidebarTimer);
};

const togglePopup = () => {
  showPopup.value = !showPopup.value;
};

const handleClickOutside = (event) => {
  if (
      popup.value &&
      !popup.value.contains(event.target) &&
      !popupButton.value.contains(event.target) &&
      !event.target.closest('.bg-purple')
  ) {
    showPopup.value = false;
  }
  if (
      !event.target.closest('.w-48') &&
      !event.target.closest('.v-app-bar-nav-icon')
  ) {
    hideSideBar.value = true;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
  eventBus.value.toggleSidebar = toggleSidebar;
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
  eventBus.value.toggleSidebar = null;
});
</script>

<style scoped>
/* Do not remove. Used for animation */
.slide-fade-enter-active, .slide-fade-leave-active {
  transition: transform 0.7s ease, opacity 0.7s ease;
}

.slide-fade-enter, .slide-fade-leave-to 
{
  transform: translateX(-100%);
  opacity: 0;
}
</style>
