<script>
import theme from "#build/b24ui/dashboard-navbar";
</script>

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { createReusableTemplate } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useDashboard } from "../utils/dashboard";
import { tv } from "../utils/tv";
import B24DashboardSidebarToggle from "./DashboardSidebarToggle.vue";
defineOptions({ inheritAttrs: false });
const _props = defineProps({
  as: { type: null, required: false },
  icon: { type: [Function, Object], required: false },
  title: { type: String, required: false },
  toggle: { type: [Boolean, Object], required: false, default: true },
  toggleSide: { type: String, required: false, default: "left" },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const props = useComponentProps("dashboardNavbar", _props);
const appConfig = useAppConfig();
const dashboardContext = useDashboard({});
const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.dashboardNavbar || {} })());
</script>

<template>
  <DefineToggleTemplate>
    <slot name="toggle" v-bind="{ ...dashboardContext, b24ui }">
      <B24DashboardSidebarToggle
        v-if="props.toggle"
        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
        :side="props.toggleSide"
        data-slot="toggle"
        :class="b24ui.toggle({ class: props.b24ui?.toggle, toggleSide: props.toggleSide })"
      />
    </slot>
  </DefineToggleTemplate>

  <Primitive :as="props.as" v-bind="$attrs" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <div data-slot="left" :class="b24ui.left({ class: props.b24ui?.left })">
      <ReuseToggleTemplate v-if="props.toggleSide === 'left'" />

      <slot name="left" v-bind="dashboardContext">
        <slot name="leading" v-bind="{ ...dashboardContext, b24ui }">
          <Component
            :is="props.icon"
            v-if="props.icon"
            data-slot="icon"
            :class="b24ui.icon({ class: props.b24ui?.icon })"
          />
        </slot>

        <h1 data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
          <slot name="title">
            {{ props.title }}
          </slot>
        </h1>

        <slot name="trailing" v-bind="{ ...dashboardContext, b24ui }" />
      </slot>
    </div>

    <div v-if="!!slots.default" data-slot="center" :class="b24ui.center({ class: props.b24ui?.center })">
      <slot v-bind="dashboardContext" />
    </div>

    <div data-slot="right" :class="b24ui.right({ class: props.b24ui?.right })">
      <slot name="right" v-bind="dashboardContext" />

      <ReuseToggleTemplate v-if="props.toggleSide === 'right'" />
    </div>
  </Primitive>
</template>
