import { defineComponent, ref, inject, computed, unref, provide, readonly, toRef, watch, renderSlot } from 'vue';
import { useEventListener } from '@vueuse/core';
import '../../../utils/index.mjs';
import {
  rovingFocusGroupProps,
  ROVING_FOCUS_COLLECTION_INJECTION_KEY as COLLECTION_INJECTION_KEY,
} from './roving-focus-group.mjs';
import { ROVING_FOCUS_GROUP_INJECTION_KEY } from './tokens.mjs';
import { focusFirst } from './utils.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { composeEventHandlers } from '../../../utils/dom/event.mjs';

const CURRENT_TAB_ID_CHANGE_EVT = 'currentTabIdChange';
const ENTRY_FOCUS_EVT = 'rovingFocusGroup.entryFocus';
const EVT_OPTS = { bubbles: true, cancelable: false };
const _sfc_main = defineComponent({
  name: 'ElRovingFocusGroupImpl',
  inheritAttrs: false,
  props: rovingFocusGroupProps,
  emits: [CURRENT_TAB_ID_CHANGE_EVT, 'entryFocus'],
  setup(props, { emit }) {
    var _a;
    const currentTabbedId = ref((_a = props.currentTabId || props.defaultCurrentTabId) != null ? _a : null);
    const isBackingOut = ref(false);
    const isClickFocus = ref(false);
    const rovingFocusGroupRef = ref(null);
    const { getItems } = inject(COLLECTION_INJECTION_KEY, void 0);
    const rovingFocusGroupRootStyle = computed(() => {
      return [
        {
          outline: 'none',
        },
        props.style,
      ];
    });
    const onItemFocus = tabbedId => {
      emit(CURRENT_TAB_ID_CHANGE_EVT, tabbedId);
    };
    const onItemShiftTab = () => {
      isBackingOut.value = true;
    };
    const onMousedown = composeEventHandlers(
      e => {
        var _a2;
        (_a2 = props.onMousedown) == null ? void 0 : _a2.call(props, e);
      },
      () => {
        isClickFocus.value = true;
      }
    );
    const onFocus = composeEventHandlers(
      e => {
        var _a2;
        (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, e);
      },
      e => {
        const isKeyboardFocus = !unref(isClickFocus);
        const { target, currentTarget } = e;
        if (target === currentTarget && isKeyboardFocus && !unref(isBackingOut)) {
          const entryFocusEvt = new Event(ENTRY_FOCUS_EVT, EVT_OPTS);
          // 解决报错 failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'
          if (entryFocusEvt && entryFocusEvt.originalEvent) {
            currentTarget == null ? void 0 : currentTarget.dispatchEvent(entryFocusEvt);
          }
          if (!entryFocusEvt.defaultPrevented) {
            const items = getItems().filter(item => item.focusable);
            const activeItem = items.find(item => item.active);
            const currentItem = items.find(item => item.id === unref(currentTabbedId));
            const candidates = [activeItem, currentItem, ...items].filter(Boolean);
            const candidateNodes = candidates.map(item => item.ref);
            focusFirst(candidateNodes);
          }
        }
        isClickFocus.value = false;
      }
    );
    const onBlur = composeEventHandlers(
      e => {
        var _a2;
        (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
      },
      () => {
        isBackingOut.value = false;
      }
    );
    const handleEntryFocus = (...args) => {
      emit('entryFocus', ...args);
    };
    provide(ROVING_FOCUS_GROUP_INJECTION_KEY, {
      currentTabbedId: readonly(currentTabbedId),
      loop: toRef(props, 'loop'),
      tabIndex: computed(() => {
        return unref(isBackingOut) ? -1 : 0;
      }),
      rovingFocusGroupRef,
      rovingFocusGroupRootStyle,
      orientation: toRef(props, 'orientation'),
      dir: toRef(props, 'dir'),
      onItemFocus,
      onItemShiftTab,
      onBlur,
      onFocus,
      onMousedown,
    });
    watch(
      () => props.currentTabId,
      val => {
        currentTabbedId.value = val != null ? val : null;
      }
    );
    useEventListener(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus);
  },
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return renderSlot(_ctx.$slots, 'default');
}
var ElRovingFocusGroupImpl = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ['render', _sfc_render],
  [
    '__file',
    '/home/runner/work/element-plus/element-plus/packages/components/roving-focus-group/src/roving-focus-group-impl.vue',
  ],
]);

export { ElRovingFocusGroupImpl as default };
//# sourceMappingURL=roving-focus-group-impl.mjs.map