import { onMounted, nextTick } from 'vue';
import type { MyHTMLElement } from '../types';
import { SHORTCUTS_PATCH_WRAPPER } from '../utils/constants';
import { createExtraWrapper } from '../utils';

export const useShortcutsPatch = (elPopperEl: { value: MyHTMLElement }) => {
  onMounted(async () => {
    await nextTick();
    const wrapper = createExtraWrapper(
      elPopperEl.value,
      SHORTCUTS_PATCH_WRAPPER
    );
    const sidebar = document.querySelector('.el-picker-panel__sidebar');
    wrapper.style.display = 'block';
    sidebar && wrapper.appendChild(sidebar);
  });
};
