<template>
    <header>
        <nav class="navbar navbar-expand-lg fixed-top">
            <div class="container-fluid">
              <NuxtLink class="navbar-brand d-flex align-items-center" to="/">
                <img src="/images/logo-leviathan.webp" alt="leviathan-logo" width="140" height="70">
                <span class="text-uppercase fw-bold fs-4 text-white">Leviathán</span>
              </NuxtLink>
              <button class="btn-menu" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
                <i class="bi bi-list text-white"></i>
              </button>
              <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                <div class="offcanvas-header justify-content-end">
                    <div class="d-flex justify-content-between">
                        <button type="button" class="btn text-white" data-bs-dismiss="offcanvas" aria-label="Close">
                          <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                </div>
                <div class="offcanvas-body">
                  <ul class="navbar-nav justify-content-center flex-grow-1 pe-3 gap-4">
                    <li class="nav-item">
                      <NuxtLink to="/" class="nav-link text-white" :class="route.path == '/' ? 'active':''" @click="changeActualPage(''); handleLinkClick($event)">Inicio</NuxtLink>
                    </li>
                    <li class="nav-item">
                      <NuxtLink to="/servicios" class="nav-link text-white" :class="route.path.includes('/servicios') ? 'active':''" @click="changeActualPage('Servicios'); handleLinkClick($event)">Servicios</NuxtLink>
                    </li>
                    <li class="nav-item">
                        <NuxtLink to="/nosotros" class="nav-link text-white" :class="route.path.includes('/nosotros') ? 'active':''" @click="changeActualPage('Nosotros'); handleLinkClick($event)">Nosotros</NuxtLink>
                    </li>
                    <li class="nav-item">
                        <NuxtLink to="/contacto" class="nav-link text-white" :class="route.path.includes('/contacto') ? 'active':''" @click="changeActualPage('Contacto'); handleLinkClick($event)">Contacto</NuxtLink>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="location">
                <h5 class="mb-0">Cancún, Quintana Roo</h5>
              </div>
            </div>
          </nav>
    </header>

</template>
<script setup lang="ts">
import { useMenuStore } from '~/stores/menu.store';
const menuStore = useMenuStore();
const { changeActualPage } = menuStore;

const route = useRoute();
const router = useRouter();


onMounted(() => {
  // Crear un observador de mutaciones para el body
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.attributeName === 'style') {
        // Forzar la eliminación del padding-right
        document.body.style.paddingRight = '0px';
      }
    });
  });

  // Configurar el observador para observar atributos del body
  observer.observe(document.body, { attributes: true });

  // Limpiar el observador cuando el componente se desmonte
  onBeforeUnmount(() => {
    observer.disconnect();
  });
});


const cleanUpOverflow = () => {
  document.body.style.overflow = ''; // Restablece el overflow
  document.body.style.paddingRight = '0px'; // Restablece padding-rigth
  document.body.classList.remove('offcanvas-open'); // Remueve la clase si aún está presente
};

// Limpiar antes de desmontar el layout actual
onBeforeUnmount(() => {
  cleanUpOverflow();
});

// Limpiar cada vez que se cambia de ruta/layout
router.afterEach(() => {
  cleanUpOverflow();
});

const handleLinkClick = (event: any) => {
  event.preventDefault(); // Prevenir la acción por defecto del enlace
  const href = event.target.getAttribute('href');

  const offcanvasElement = document.getElementById('offcanvasNavbar');
  const offcanvasInstance = bootstrap.Offcanvas.getInstance(offcanvasElement);
  if (offcanvasInstance) {
    offcanvasInstance.hide();
  }

  router.push(href); // Navegar a la nueva ruta
};

</script>

<style scoped lang="scss">
.navbar {
    background: rgba($color: #444, $alpha: 0.7);
}

.nav-link {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    text-shadow: 2px 3px 2px black;
    transition: all 300ms ease;
}

.nav-link:hover {
    cursor: pointer;
    text-shadow: 0px 0px 3px white;
}

.nav-link.active {
    text-shadow: 0px 0px 3px white;
}

.location {
    color: white;
    display: none;
    h5 {
      font-size: 15px;
    }
}

.offcanvas.offcanvas-end.show, .offcanvas.offcanvas-end.showing {
    background: rgba($color: #444, $alpha: 0.8);
}

.btn-menu {
    background-color: transparent;
    border: none;
    
    i {
        font-size: 25px;
    }
}

.btn-close {
    color: white;
}

@media (min-width: 992px) {
    .location {
        display: block;
    }
    .btn-menu {
        display: none;
    }
}

</style>
