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

<script setup>
import { computed, ref, onMounted, useId } from "vue";
import { Primitive } from "reka-ui";
import { useHead, useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useLocale } from "../composables/useLocale";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
import B24Link from "./Link.vue";
import B24Container from "./Container.vue";
import B24Button from "./Button.vue";
defineOptions({ inheritAttrs: false });
const _props = defineProps({
  as: { type: null, required: false },
  id: { type: String, required: false },
  icon: { type: [Function, Object], required: false },
  title: { type: String, required: false },
  actions: { type: Array, required: false },
  to: { type: null, required: false },
  target: { type: [String, Object, null], required: false },
  color: { type: null, required: false },
  close: { type: [Boolean, Object], required: false },
  closeIcon: { type: [Function, Object], required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const emits = defineEmits(["close"]);
const props = useComponentProps("banner", _props);
const { t } = useLocale();
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.banner || {} })({
  color: props.color,
  to: !!props.to
}));
const instanceId = useId();
const id = computed(() => {
  const rawId = props.id || instanceId;
  return `banner-${rawId.replace(/[^\w-]/g, "-")}`;
});
const isVisible = ref(true);
const hasPersistence = computed(() => !!props.id);
onMounted(() => {
  if (hasPersistence.value && typeof localStorage !== "undefined" && typeof localStorage.getItem === "function") {
    const isClosed = localStorage.getItem(id.value) === "true";
    isVisible.value = !isClosed;
  }
});
useHead(() => {
  if (!hasPersistence.value) return {};
  return {
    script: [{
      key: `prehydrate-banner-${id.value}`,
      innerHTML: `
        (function() {
          try {
            if (localStorage.getItem(${JSON.stringify(id.value)}) === 'true') {
              document.documentElement.style.setProperty('--${id.value}-display', 'none');
            }
          } catch (e) {}
        })();
      `.replace(/\s+/g, " "),
      type: "text/javascript",
      tagPosition: "head"
    }],
    style: [{
      key: `banner-style-${id.value}`,
      innerHTML: `.banner[data-banner-id="${id.value}"] { display: var(--${id.value}-display, block); }`,
      tagPosition: "head"
    }]
  };
});
function onClose() {
  if (hasPersistence.value && typeof localStorage !== "undefined" && typeof localStorage.setItem === "function") {
    localStorage.setItem(id.value, "true");
    document.documentElement.style.setProperty(`--${id.value}-display`, "none");
  }
  isVisible.value = false;
  emits("close");
}
</script>

<template>
  <Primitive
    v-show="isVisible"
    :as="props.as"
    class="banner"
    :data-banner-id="id"
    data-slot="root"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
  >
    <B24Link
      v-if="props.to"
      :aria-label="props.title"
      v-bind="{ to: props.to, target: props.target, ...$attrs }"
      class="focus:outline-none"
      tabindex="-1"
      raw
    >
      <span class="absolute inset-0" aria-hidden="true" />
    </B24Link>

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

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

        <div v-if="props.title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
          <slot name="title">
            {{ props.title }}
          </slot>
        </div>

        <div v-if="props.actions?.length || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
          <slot name="actions">
            <B24Button
              v-for="(action, index) in props.actions"
              :key="index"
              color="air-secondary-no-accent"
              size="xs"
              v-bind="action"
            />
          </slot>
        </div>
      </div>

      <div data-slot="right" :class="b24ui.right({ class: props.b24ui?.right })">
        <slot name="close" :b24ui="b24ui">
          <B24Button
            v-if="props.close"
            :icon="props.closeIcon || icons.close"
            size="md"
            color="air-tertiary-no-accent"
            :aria-label="t('banner.close')"
            v-bind="typeof props.close === 'object' ? props.close : {}"
            data-slot="close"
            :class="b24ui.close({ class: props.b24ui?.close })"
            @click="onClose"
          />
        </slot>
      </div>
    </B24Container>
  </Primitive>
</template>
