<script>
import theme from "#build/b24ui/context-menu";
</script>

<script setup>
import { computed, toRef } from "vue";
import { ContextMenuRoot, ContextMenuTrigger } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useForwardProps } from "../composables/useForwardProps";
import { omit } from "../utils";
import { tv } from "../utils/tv";
import B24ContextMenuContent from "./ContextMenuContent.vue";
const _props = defineProps({
  items: { type: null, required: false },
  checkedIcon: { type: [Function, Object], required: false },
  loadingIcon: { type: [Function, Object], required: false },
  externalIcon: { type: [Boolean, Function, Object], required: false, default: true },
  content: { type: Object, required: false },
  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
  labelKey: { type: null, required: false, default: "label" },
  descriptionKey: { type: null, required: false, default: "description" },
  disabled: { type: Boolean, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  pressOpenDelay: { type: Number, required: false },
  modal: { type: Boolean, required: false, default: true }
});
const emits = defineEmits(["update:open"]);
const slots = defineSlots();
const props = useComponentProps("contextMenu", _props);
const appConfig = useAppConfig();
const rootProps = useForwardProps(reactivePick(props, "modal"), emits);
const contentProps = toRef(() => props.content);
const getProxySlots = () => omit(slots, ["default"]);
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.contextMenu || {} })({}));
</script>

<template>
  <ContextMenuRoot v-bind="rootProps">
    <ContextMenuTrigger v-if="!!slots.default" as-child :disabled="props.disabled" :class="props.class">
      <slot />
    </ContextMenuTrigger>

    <B24ContextMenuContent
      data-slot="content"
      :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
      :b24ui="b24ui"
      :b24ui-override="props.b24ui"
      v-bind="contentProps"
      :items="props.items"
      :portal="props.portal"
      :label-key="props.labelKey"
      :description-key="props.descriptionKey"
      :checked-icon="props.checkedIcon"
      :loading-icon="props.loadingIcon"
      :external-icon="props.externalIcon"
    >
      <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>
    </B24ContextMenuContent>
  </ContextMenuRoot>
</template>
