<script setup>
import { HorizontalNav } from '@layouts/components'
import { VerticalNav } from '@layouts/components'

// ℹ️ Using import from `@layouts` causing build to hangup

// import { useLayouts } from '@layouts'
import { useLayoutConfigStore } from '@layouts/stores/config'

const props = defineProps({
  navItems: {
    type: null,
    required: true,
  },
  verticalNavAttrs: {
    type: Object,
    default: () => ({}),
  },
})

const showMenu = ref(false)

const toggleMenu = () => {
  showMenu.value = !showMenu.value
}

const { width: windowWidth } = useWindowSize()
const configStore = useLayoutConfigStore()
const isOverlayNavActive = ref(false)
const isLayoutOverlayVisible = ref(false)
const toggleIsOverlayNavActive = useToggle(isOverlayNavActive)

syncRef(isOverlayNavActive, isLayoutOverlayVisible)

watch(windowWidth, () => {
  if (!configStore.isLessThanOverlayNavBreakpoint && isLayoutOverlayVisible.value)
    isLayoutOverlayVisible.value = false
})

// 👉 Vertical nav
const verticalNav = h(VerticalNav, { isOverlayNavActive: isOverlayNavActive.value, toggleIsOverlayNavActive, navItems: props.navItems }, {
  'nav-header': () => slots['vertical-nav-header']?.(),
  'before-nav-items': () => slots['before-vertical-nav-items']?.(),
})

</script>

<template>
  <div class="layout-wrapper" :class="configStore._layoutClasses">
    <div class="layout-navbar-and-nav-container" :class="configStore.isNavbarBlurEnabled && 'header-blur'">
      <!-- 👉 Navbar -->
      <div class="layout-navbar">
        <div class="navbar-content-container">
          <slot name="navbar" />
        </div>
      </div>
    </div>

    <main class="layout-page-content">
      <slot />
    </main>

    <!-- 👉 Footer -->
    <footer class="layout-footer">
      <div class="footer-content-container">
        <slot name="footer" />
      </div>

      <!-- Menu Footer -->
      <VBottomNavigation :elevation="0" grow class="menu-footer" mode="shift">
        <VBtn to="/" selected-class="menu-footer-ativo">
          <VIcon icon="tabler-home" size="25" />
          <span>-</span>
        </VBtn>

        <VBtn to="/lojas" selected-class="menu-footer-ativo">
          <VIcon icon="tabler-building-store" size="25" />
          <span>-</span>
        </VBtn>

        <VBtn to="/carrinho" selected-class="menu-footer-ativo">
          <VIcon icon="tabler-shopping-cart" size="25" />
          <span>-</span>
        </VBtn>

        <VBtn @click="toggleMenu" selected-class="menu-footer-ativo">
          <VIcon icon="tabler-menu-2" size="25" />
          <span>-</span>
        </VBtn>
      </VBottomNavigation>

    </footer>
  </div>
</template>

<style lang="scss">
@use "@configured-variables" as variables;
@use "@layouts/styles/placeholders";
@use "@layouts/styles/mixins";

.layout-wrapper {
  &.layout-nav-type-horizontal {
    display: flex;
    flex-direction: column;

    // // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
    // min-height: 100%;
    min-block-size: 100dvh;

    .layout-navbar-and-nav-container {
      z-index: 1;
    }

    .layout-navbar {
      z-index: variables.$layout-horizontal-nav-layout-navbar-z-index;
      block-size: variables.$layout-horizontal-nav-navbar-height;

      // ℹ️ For now we are not independently managing navbar and horizontal nav so we won't use below style to avoid conflicting with combo style of navbar and horizontal nav
      // If we add independent style of navbar & horizontal nav then we have to add :not for avoiding conflict with combo styles
      // .layout-navbar-sticky & {
      //   @extend %layout-navbar-sticky;
      // }

      // ℹ️ For now we are not independently managing navbar and horizontal nav so we won't use below style to avoid conflicting with combo style of navbar and horizontal nav
      // If we add independent style of navbar & horizontal nav then we have to add :not for avoiding conflict with combo styles
      // .layout-navbar-hidden & {
      //   @extend %layout-navbar-hidden;
      // }
    }

    // 👉 Navbar
    .navbar-content-container {
      @include mixins.boxed-content;
    }

    // 👉   Content height fixed
    &.layout-content-height-fixed {
      max-block-size: 100dvh;

      .layout-page-content {
        overflow: hidden;

        > :first-child {
          max-block-size: 100%;
          overflow-y: auto;
        }
      }
    }

    // 👉 Footer
    // Boxed content
    .layout-footer {
      .footer-content-container {
        @include mixins.boxed-content;
      }
    }
  }

  // If both navbar & horizontal nav sticky
  &.layout-navbar-sticky.horizontal-nav-sticky {
    .layout-navbar-and-nav-container {
      position: sticky;
      inset-block-start: 0;
      will-change: transform;
    }
  }

  &.layout-navbar-hidden.horizontal-nav-hidden {
    .layout-navbar-and-nav-container {
      display: none;
    }
  }
}

// 👉 Horizontal nav nav
.layout-horizontal-nav {
  z-index: variables.$layout-horizontal-nav-z-index;

  // .horizontal-nav-sticky & {
  //   width: 100%;
  //   will-change: transform;
  //   position: sticky;
  //   top: 0;
  // }

  // .horizontal-nav-hidden & {
  //   display: none;
  // }

  .horizontal-nav-content-container {
    @include mixins.boxed-content(true);
  }
}
</style>
