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

<script setup>
import { computed, toRef } from "vue";
import { defu } from "defu";
import {
  DropdownMenuRoot,
  DropdownMenuTrigger,
  DropdownMenuArrow,
  useForwardPropsEmits
} from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { omit } from "../utils";
import { tv } from "../utils/tv";
import B24DropdownMenuContent from "./DropdownMenuContent.vue";
const props = defineProps({
  items: { type: null, required: false },
  checkedIcon: { type: [Function, Object], required: false },
  externalIcon: { type: [Boolean, Function, Object], required: false, default: true },
  content: { type: Object, required: false },
  arrow: { type: [Boolean, 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: null, required: false },
  defaultOpen: { type: Boolean, required: false },
  open: { type: Boolean, required: false },
  modal: { type: Boolean, required: false, default: true }
});
const emits = defineEmits(["update:open"]);
const slots = defineSlots();
const appConfig = useAppConfig();
const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "modal"), emits);
const contentProps = toRef(() => defu(props.content, { side: "bottom", align: "center", sideOffset: 8, collisionPadding: 8 }));
const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
const proxySlots = omit(slots, ["default"]);
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dropdownMenu || {} })({}));
</script>

<template>
  <DropdownMenuRoot
    v-slot="{ open }"
    v-bind="rootProps"
  >
    <DropdownMenuTrigger
      v-if="!!slots.default"
      as-child
      :class="props.class"
      :disabled="disabled"
    >
      <slot :open="open" />
    </DropdownMenuTrigger>

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

      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
    </B24DropdownMenuContent>
  </DropdownMenuRoot>
</template>
