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

<script setup>
import { computed, toRef } from "vue";
import { defu } from "defu";
import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { usePortal } from "../composables/usePortal";
import { tv } from "../utils/tv";
import B24Kbd from "./Kbd.vue";
const props = defineProps({
  text: { type: String, required: false },
  kbds: { type: Array, required: false },
  content: { type: Object, required: false },
  arrow: { type: [Boolean, Object], required: false, default: true },
  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
  reference: { type: null, required: false },
  class: { type: null, required: false },
  b24ui: { type: null, required: false },
  defaultOpen: { type: Boolean, required: false },
  open: { type: Boolean, required: false },
  delayDuration: { type: Number, required: false },
  disableHoverableContent: { type: Boolean, required: false },
  disableClosingTrigger: { type: Boolean, required: false },
  disabled: { type: Boolean, required: false },
  ignoreNonKeyboardFocus: { type: Boolean, required: false }
});
const emits = defineEmits(["update:open"]);
const slots = defineSlots();
const appConfig = useAppConfig();
const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "delayDuration", "disableHoverableContent", "disableClosingTrigger", "ignoreNonKeyboardFocus"), emits);
const portalProps = usePortal(toRef(() => props.portal));
const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 12, height: 7 }));
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tooltip || {} })({
  side: contentProps.value.side
}));
</script>

<template>
  <TooltipRoot
    v-slot="{ open }"
    v-bind="rootProps"
    :disabled="!(text || kbds?.length || !!slots.content) || props.disabled"
  >
    <TooltipTrigger
      v-if="!!slots.default || !!reference"
      v-bind="$attrs"
      as-child
      :reference="reference"
      :class="props.class"
    >
      <slot :open="open" />
    </TooltipTrigger>

    <TooltipPortal v-bind="portalProps">
      <TooltipContent v-bind="contentProps" data-slot="content" :class="b24ui.content({ class: [!slots.default && props.b24ui?.content, props.class] })">
        <slot name="content" :b24ui="b24ui">
          <span v-if="text" data-slot="text" :class="b24ui.text({ class: props.b24ui?.text })">{{ text }}</span>

          <span v-if="kbds?.length" data-slot="kbds" :class="b24ui.kbds({ class: props.b24ui?.kbds })">
            <B24Kbd
              v-for="(kbd, index) in kbds"
              :key="index"
              :size="props.b24ui?.kbdsSize || b24ui.kbdsSize()"
              :accent="props.b24ui?.kbdsAccent || b24ui.kbdsAccent()"
              v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
            />
          </span>
        </slot>

        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
      </TooltipContent>
    </TooltipPortal>
  </TooltipRoot>
</template>
