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

<script setup>
import { computed, toRef } from "vue";
import { defu } from "defu";
import { Popover, HoverCard } from "reka-ui/namespaced";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useForwardProps } from "../composables/useForwardProps";
import { FieldGroupReset } from "../composables/useFieldGroup";
import { usePortal } from "../composables/usePortal";
import { pointerDownOutside } from "../utils/overlay";
import { tv } from "../utils/tv";
const _props = defineProps({
  mode: { type: null, required: false, default: "click" },
  content: { type: Object, required: false },
  arrow: { type: [Boolean, Object], required: false },
  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
  reference: { type: null, required: false },
  dismissible: { type: Boolean, required: false, default: true },
  class: { type: null, required: false },
  b24ui: { type: null, required: false },
  defaultOpen: { type: Boolean, required: false },
  open: { type: Boolean, required: false },
  modal: { type: Boolean, required: false },
  openDelay: { type: Number, required: false, default: 0 },
  closeDelay: { type: Number, required: false, default: 0 }
});
const emits = defineEmits(["close:prevent", "update:open"]);
const slots = defineSlots();
const props = useComponentProps("popover", _props);
const appConfig = useAppConfig();
const pick = props.mode === "hover" ? reactivePick(props, "defaultOpen", "open", "openDelay", "closeDelay") : reactivePick(props, "defaultOpen", "open", "modal");
const rootProps = useForwardProps(pick, emits);
const portalProps = usePortal(toRef(() => props.portal));
const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
const contentEvents = computed(() => {
  if (!props.dismissible) {
    const events = ["interactOutside", "escapeKeyDown"];
    return events.reduce((acc, curr) => {
      acc[curr] = (e) => {
        e.preventDefault();
        emits("close:prevent");
      };
      return acc;
    }, {});
  }
  return {
    pointerDownOutside
  };
});
const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.popover || {} })({
  side: contentProps.value.side
}));
const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
</script>

<template>
  <Component.Root v-slot="{ open, close }" v-bind="rootProps">
    <Component.Trigger
      v-if="!!slots.default || !!props.reference"
      as-child
      :reference="props.reference"
      :class="props.class"
    >
      <slot :open="open" />
    </Component.Trigger>

    <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
      <slot name="anchor" v-bind="close ? { close } : {}" />
    </Component.Anchor>

    <Component.Portal v-bind="portalProps">
      <FieldGroupReset>
        <Component.Content v-bind="contentProps" data-slot="content" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-on="contentEvents">
          <slot name="content" v-bind="close ? { close } : {}" />

          <Component.Arrow v-if="!!props.arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
        </Component.Content>
      </FieldGroupReset>
    </Component.Portal>
  </Component.Root>
</template>
