<script>
import theme from "#build/b24ui/header";
</script>

<script setup>
import { computed, watch, toRef } from "vue";
import { Primitive } from "reka-ui";
import { defu } from "defu";
import { createReusableTemplate } from "@vueuse/core";
import { useAppConfig, useRoute } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useLocale } from "../composables/useLocale";
import { getSlotChildrenText } from "../utils";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
import B24Button from "./Button.vue";
import B24Link from "./Link.vue";
import B24Container from "./Container.vue";
import B24Slideover from "./Slideover.vue";
import B24Modal from "./Modal.vue";
import B24Drawer from "./Drawer.vue";
defineOptions({ inheritAttrs: false });
const _props = defineProps({
  as: { type: null, required: false, default: "header" },
  title: { type: String, required: false, default: "Bitrix24 UI" },
  to: { type: String, required: false, default: "/" },
  mode: { type: null, required: false, default: "slideover" },
  menu: { type: null, required: false },
  toggle: { type: [Boolean, Object], required: false, default: true },
  toggleSide: { type: String, required: false, default: "left" },
  autoClose: { type: Boolean, required: false, default: true },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const props = useComponentProps("header", _props);
const open = defineModel("open", { type: Boolean, ...{ default: false } });
const route = useRoute();
const { t } = useLocale();
const appConfig = useAppConfig();
const [DefineLeftTemplate, ReuseLeftTemplate] = createReusableTemplate();
const [DefineRightTemplate, ReuseRightTemplate] = createReusableTemplate();
const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
const ariaLabel = computed(() => {
  const slotText = slots.title && getSlotChildrenText(slots.title());
  return (slotText || props.title || "Nuxt UI").trim();
});
watch(() => route.fullPath, () => {
  if (!props.autoClose) return;
  open.value = false;
});
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.header || {} })());
const Menu = computed(() => ({
  slideover: B24Slideover,
  modal: B24Modal,
  drawer: B24Drawer
})[props.mode]);
const menuProps = toRef(() => {
  const modeSettings = props.mode === "modal" ? { fullscreen: true, transition: false } : props.mode === "slideover" ? { side: "left", close: false } : {};
  if (props.mode === "modal") {
    modeSettings["b24ui"] = { content: "p-0 pt-0" };
  }
  const result = defu(
    props.menu,
    modeSettings
  );
  result["b24ui"] = {
    overlay: b24ui.value.overlay({ class: props.b24ui?.overlay }),
    content: b24ui.value.content({
      class: [modeSettings?.b24ui?.content, props.b24ui?.content]
    })
  };
  return result;
});
function toggleOpen() {
  open.value = !open.value;
}
</script>

<template>
  <DefineToggleTemplate>
    <slot name="toggle" :open="open" :toggle="toggleOpen" :b24ui="b24ui">
      <B24Button
        v-if="props.toggle"
        color="air-tertiary"
        size="md"
        :aria-label="open ? t('header.close') : t('header.open')"
        :icon="open ? icons.close : icons.menu"
        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
        data-slot="toggle"
        :class="b24ui.toggle({ class: props.b24ui?.toggle, toggleSide: props.toggleSide })"
        @click="toggleOpen"
      />
    </slot>
  </DefineToggleTemplate>

  <DefineLeftTemplate>
    <div data-slot="left" :class="b24ui.left({ class: props.b24ui?.left })">
      <ReuseToggleTemplate v-if="props.toggleSide === 'left'" />

      <slot name="left">
        <B24Link :to="props.to" :aria-label="ariaLabel" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
          <slot name="title">
            {{ props.title }}
          </slot>
        </B24Link>
      </slot>
    </div>
  </DefineLeftTemplate>

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

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

  <Primitive :as="props.as" v-bind="$attrs" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <slot name="top" />

    <B24Container data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
      <ReuseLeftTemplate />

      <div data-slot="center" :class="b24ui.center({ class: props.b24ui?.center })">
        <slot />
      </div>

      <ReuseRightTemplate />
    </B24Container>

    <slot name="bottom" />
  </Primitive>

  <Menu
    v-model:open="open"
    :title="t('header.title')"
    :description="t('header.description')"
    v-bind="menuProps"
  >
    <template #content="contentData">
      <slot name="content" v-bind="contentData">
        <div v-if="props.mode !== 'drawer'" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
          <ReuseLeftTemplate />

          <ReuseRightTemplate />
        </div>

        <div data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
          <slot name="body" />
        </div>
      </slot>
    </template>
  </Menu>
</template>
