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

<script setup>
import { computed, toRef } from "vue";
import { defu } from "defu";
import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow } 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 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" },
  filter: { type: [Boolean, Object], required: false, default: false },
  filterFields: { type: Array, required: false },
  ignoreFilter: { type: Boolean, required: false, default: false },
  disabled: { type: Boolean, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, 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 searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
const props = useComponentProps("dropdownMenu", _props);
const appConfig = useAppConfig();
const rootProps = useForwardProps(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 getProxySlots = () => 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="props.disabled"
    >
      <slot :open="open" />
    </DropdownMenuTrigger>

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

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