<script>

</script>

<script setup>
import { computed, toRef } from "vue";
import { ContextMenu } from "reka-ui/namespaced";
import { useForwardPropsEmits } from "reka-ui";
import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
import { FieldGroupReset } from "../composables/useFieldGroup";
import { useLocale } from "../composables/useLocale";
import { usePortal } from "../composables/usePortal";
import { omit, get, isArrayOfArray } from "../utils";
import { pickLinkProps } from "../utils/link";
import icons from "../dictionary/icons";
import B24LinkBase from "./LinkBase.vue";
import B24Link from "./Link.vue";
import B24Avatar from "./Avatar.vue";
import B24Kbd from "./Kbd.vue";
import B24ContextMenuContent from "./ContextMenuContent.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  items: { type: null, required: false },
  portal: { type: [Boolean, String], required: false, skipCheck: true },
  sub: { type: Boolean, required: false },
  labelKey: { type: null, required: true },
  descriptionKey: { type: null, required: true },
  checkedIcon: { type: [Function, Object], required: false },
  loadingIcon: { type: [Function, Object], required: false },
  externalIcon: { type: [Boolean, Function, Object], required: false },
  class: { type: null, required: false },
  b24ui: { type: null, required: true },
  b24uiOverride: { type: null, required: false },
  loop: { type: Boolean, required: false },
  sideFlip: { type: Boolean, required: false },
  alignOffset: { type: Number, required: false },
  alignFlip: { type: Boolean, required: false },
  avoidCollisions: { type: Boolean, required: false },
  collisionBoundary: { type: null, required: false },
  collisionPadding: { type: [Number, Object], required: false },
  hideShiftedArrow: { type: Boolean, required: false },
  sticky: { type: String, required: false },
  hideWhenDetached: { type: Boolean, required: false },
  positionStrategy: { type: String, required: false },
  disableUpdateOnLayoutShift: { type: Boolean, required: false },
  prioritizePosition: { type: Boolean, required: false },
  reference: { type: null, required: false }
});
const emits = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "closeAutoFocus"]);
const slots = defineSlots();
const { dir } = useLocale();
const portalProps = usePortal(toRef(() => props.portal));
const contentProps = useForwardPropsEmits(reactiveOmit(props, "sub", "items", "portal", "labelKey", "descriptionKey", "checkedIcon", "loadingIcon", "externalIcon", "class", "b24ui", "b24uiOverride"), emits);
const getProxySlots = () => omit(slots, ["default"]);
const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate();
const childrenIcon = computed(() => dir.value === "rtl" ? icons.chevronLeft : icons.chevronRight);
const groups = computed(
  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
);
</script>

<template>
  <DefineItemTemplate v-slot="{ item, active, index }">
    <slot
      :name="item.slot || 'item'"
      :item="item"
      :index="index"
      :b24ui="b24ui"
    >
      <slot
        :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
        :item="item"
        :active="active"
        :index="index"
        :b24ui="b24ui"
      >
        <B24Avatar
          v-if="item.avatar"
          :size="item.b24ui?.itemLeadingAvatarSize || b24uiOverride?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
          v-bind="item.avatar"
          data-slot="itemLeadingAvatar"
          :class="b24ui.itemLeadingAvatar({ class: [b24uiOverride?.itemLeadingAvatar, item.b24ui?.itemLeadingAvatar], active })"
        />
      </slot>

      <span
        v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description'])"
        data-slot="itemWrapper"
        :class="b24ui.itemWrapper({ class: [b24uiOverride?.itemWrapper, item.b24ui?.itemWrapper] })"
      >
        <span data-slot="itemLabel" :class="b24ui.itemLabel({ class: [b24uiOverride?.itemLabel, item.b24ui?.itemLabel], active })">
          <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
            {{ get(item, props.labelKey) }}
          </slot>
        </span>

        <span
          v-if="get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description']"
          data-slot="itemDescription"
          :class="b24ui.itemDescription({ class: [b24uiOverride?.itemDescription, item.b24ui?.itemDescription] })"
        >
          <slot
            :name="item.slot ? `${item.slot}-description` : 'item-description'"
            :item="item"
            :active="active"
            :index="index"
          >
            {{ get(item, props.descriptionKey) }}
          </slot>
        </span>
      </span>

      <span data-slot="itemTrailing" :class="b24ui.itemTrailing({ class: [b24uiOverride?.itemTrailing, item.b24ui?.itemTrailing] })">
        <ContextMenu.ItemIndicator as-child>
          <Component
            :is="checkedIcon || icons.check"
            data-slot="itemTrailingIcon"
            :class="b24ui.itemTrailingIcon({ class: [b24uiOverride?.itemTrailingIcon, item.b24ui?.itemTrailingIcon], color: item?.color })"
          />
        </ContextMenu.ItemIndicator>

        <slot
          :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
          :item="item"
          :active="active"
          :index="index"
          :b24ui="b24ui"
        >
          <Component
            :is="loadingIcon || icons.loading"
            v-if="item.loading"
            data-slot="itemLeadingIcon"
            :class="b24ui.itemLeadingIcon({ class: [b24uiOverride?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], color: item?.color, loading: true })"
          />
          <Component
            :is="childrenIcon"
            v-else-if="item.children?.length"
            data-slot="itemTrailingIcon"
            :class="b24ui.itemTrailingIcon({ class: [b24uiOverride?.itemTrailingIcon, item.b24ui?.itemTrailingIcon], color: item?.color, active })"
          />
          <Component
            :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
            v-else-if="item.target === '_blank' && externalIcon !== false"
            data-slot="itemLabelExternalIcon"
            :class="b24ui.itemLabelExternalIcon({ class: [b24uiOverride?.itemLabelExternalIcon, item.b24ui?.itemLabelExternalIcon], color: item?.color, active })"
          />
          <Component
            :is="item.icon"
            v-else-if="item.icon"
            data-slot="itemLeadingIcon"
            :class="b24ui.itemLeadingIcon({ class: [b24uiOverride?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], color: item?.color, active })"
          />
          <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="b24ui.itemTrailingKbds({ class: [b24uiOverride?.itemTrailingKbds, item.b24ui?.itemTrailingKbds] })">
            <B24Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.b24ui?.itemTrailingKbdsSize || b24uiOverride?.itemTrailingKbdsSize || b24ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
          </span>
        </slot>
      </span>
    </slot>
  </DefineItemTemplate>

  <ContextMenu.Portal v-bind="portalProps">
    <FieldGroupReset>
      <component
        :is="sub ? ContextMenu.SubContent : ContextMenu.Content"
        data-slot="content"
        :class="b24ui.content({ class: [b24uiOverride?.content, props.class] })"
        v-bind="contentProps"
      >
        <slot name="content-top" :sub="sub ?? false" />

        <div role="presentation" data-slot="viewport" :class="b24ui.viewport({ class: b24uiOverride?.viewport })">
          <ContextMenu.Group
            v-for="(group, groupIndex) in groups"
            :key="`group-${groupIndex}`"
            data-slot="group"
            :class="b24ui.group({ class: b24uiOverride?.group })"
          >
            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
              <ContextMenu.Label v-if="item.type === 'label'" data-slot="label" :class="b24ui.label({ class: [b24uiOverride?.label, item.b24ui?.label, item.class] })">
                <ReuseItemTemplate :item="item" :index="index" />
              </ContextMenu.Label>
              <ContextMenu.Separator v-else-if="item.type === 'separator'" data-slot="separator" :class="b24ui.separator({ class: [b24uiOverride?.separator, item.b24ui?.separator, item.class] })" />
              <ContextMenu.Sub
                v-else-if="item?.children?.length"
                :open="item.open"
                :default-open="item.defaultOpen"
              >
                <ContextMenu.SubTrigger
                  as="button"
                  type="button"
                  :disabled="item.disabled"
                  :text-value="get(item, props.labelKey)"
                  data-slot="item"
                  :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color })"
                >
                  <ReuseItemTemplate :item="item" :index="index" />
                </ContextMenu.SubTrigger>

                <B24ContextMenuContent
                  sub
                  :class="item.b24ui?.content"
                  :b24ui="b24ui"
                  :b24ui-override="b24uiOverride"
                  :portal="portal"
                  :items="item.children"
                  :align-offset="-4"
                  :label-key="labelKey"
                  :description-key="descriptionKey"
                  :checked-icon="checkedIcon"
                  :loading-icon="loadingIcon"
                  :external-icon="externalIcon"
                  v-bind="item.content"
                >
                  <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
                    <slot :name="name" v-bind="slotData" />
                  </template>
                </B24ContextMenuContent>
              </ContextMenu.Sub>
              <ContextMenu.CheckboxItem
                v-else-if="item.type === 'checkbox'"
                :model-value="item.checked"
                :disabled="item.disabled"
                :text-value="get(item, props.labelKey)"
                data-slot="item"
                :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color })"
                @update:model-value="item.onUpdateChecked"
                @select="item.onSelect"
              >
                <ReuseItemTemplate :item="item" :index="index" />
              </ContextMenu.CheckboxItem>
              <B24Link v-else v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
                <ContextMenu.Item
                  as-child
                  :disabled="item.disabled"
                  :text-value="get(item, props.labelKey)"
                  @select="item.onSelect"
                >
                  <B24LinkBase
                    v-bind="slotProps"
                    data-slot="item"
                    :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color, active })"
                  >
                    <ReuseItemTemplate :item="item" :active="active" :index="index" />
                  </B24LinkBase>
                </ContextMenu.Item>
              </B24Link>
            </template>
          </ContextMenu.Group>
        </div>

        <slot />

        <slot name="content-bottom" :sub="sub ?? false" />
      </component>
    </FieldGroupReset>
  </ContextMenu.Portal>
</template>
