<template>
  <n-el
    tag="nav"
    :style="`
        background-color: var(--body-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 0px 16px;
        height: 56px;
        position: ${sticky ? 'sticky' : 'static'};
        top: 0;
        z-index: 100;
        box-shadow: 0px 0px 2px 0px #a3a3a3;
      `"
  >
    <div
      :style="{
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'flex-start',
  gap: '12px',
  flex: flexInnerSides,
  width: 'fit-content'
}"
    >
      <n-button
        v-if="backIcon"
        class="naive-mobile-or-tablet"
        text
        aria-label="back-btn"
        :focusable="false"
        @click="router.back"
      >
        <NaiveIcon
          name="ph:arrow-left"
          :size="backIconSize"
        />
      </n-button>

      <naive-drawer-toggle
        v-if="menuTogglePlacement === 'left'"
        :icon="menuToggleIcon"
        :size="menuToggleIconSize"
        @click="drawerActive = true"
      >
        <template #toggle>
          <slot name="toggle" />
        </template>
      </naive-drawer-toggle>
      <slot name="start" />
    </div>

    <div
      v-if="!isMobileOrTablet"
      class="naive-not-mobile-or-tablet"
      :style="{
  flexGrow: 1,
  textAlign: menuPlacement
}"
    >
      <lazy-naive-menu-link
        :inverted="menuInverted"
        mode="horizontal"
        :routes="routes"
        :style="{
  justifyContent: menuPlacement
}"
      />
    </div>

    <div
      :style="{
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'flex-end',
  gap: '12px',
  flex: flexInnerSides
}"
    >
      <slot name="end" />

      <naive-drawer-toggle
        v-if="menuTogglePlacement === 'right'"
        :icon="menuToggleIcon"
        :size="menuToggleIconSize"
        @click="drawerActive = true"
      >
        <template #toggle>
          <slot name="toggle" />
        </template>
      </naive-drawer-toggle>
    </div>
  </n-el>

  <lazy-naive-drawer-link
    v-model:show="drawerActive"
    :placement="drawerPlacement"
    :width="drawerWidth"
    :routes="drawerRoutes"
    :closable="drawerClosable"
  >
    <template #header>
      <slot name="drawer-header" />
    </template>

    <slot name="drawer-content" />

    <template #footer>
      <slot name="drawer-footer" />
    </template>
  </lazy-naive-drawer-link>
</template>

<script setup>
import NaiveDrawerToggle from "./internals/NaiveDrawerToggle.vue";
import {
  ref,
  computed,
  useRouter,
  useNaiveDevice
} from "#imports";
const drawerActive = ref(false);
const router = useRouter();
const { isMobileOrTablet } = useNaiveDevice();
const props = defineProps({
  routes: { type: Array, required: false, default: () => [] },
  drawerRoutes: { type: Array, required: false, default: () => [] },
  menuToggleIcon: { type: String, required: false, default: "ph:equals" },
  menuToggleIconSize: { type: [Number, String], required: false, default: 26 },
  backIcon: { type: Boolean, required: false, default: false },
  backIconSize: { type: [Number, String], required: false, default: 26 },
  menuInverted: { type: Boolean, required: false, default: false },
  menuPlacement: { type: String, required: false, default: "left" },
  menuTogglePlacement: { type: String, required: false, default: "right" },
  drawerPlacement: { type: String, required: false, default: "left" },
  sticky: { type: Boolean, required: false, default: true },
  drawerClosable: { type: Boolean, required: false, default: true },
  drawerWidth: { type: [String, Number], required: false, default: "100%" }
});
const flexInnerSides = computed(
  () => props.menuPlacement === "center" ? 1 : "inherit"
);
</script>
