import {storeToRefs, useTabStore} from '@stores';
import {useSortable} from '@vueuse/integrations/useSortable';
import {ref} from 'vue';
import {type Options} from 'sortablejs';
import ContextMenu from '@imengyu/vue3-context-menu';
import {useI18n} from 'vue-i18n';

export function useTabSrotable() {
  const state = useTabStore();
  const {tabList} = storeToRefs(state);

  const tabRef = ref<HTMLUListElement>();

  useSortable(
    tabRef,
    tabList,
    {animation: 150} as Options,
  );

  return {tabRef};
}

export function useContextMenu() {
  const tabStore = useTabStore();

  function remove(key: string) {
    tabStore.dispatch({type: 'REMOVE', payload: key});
  }

  const {t} = useI18n();

  function onContextMenu(e: MouseEvent) {
    e.preventDefault();
    const target = e.target as HTMLLIElement;
    const key = target.getAttribute('data-key');
    if (!key || key === '-1') return;

    ContextMenu.showContextMenu({
      x: e.x,
      y: e.y,
      items: [
        {
          label: t('home.contextMenu.close'),
          onClick: remove.bind(null, key),
        },
        {
          label: t('home.contextMenu.closeRight'),
          onClick() {
            tabStore.dispatch({type: 'REMOVE_RIGHT', payload: key});
          },
        },
        {
          label: t('home.contextMenu.closeOther'),
          onClick() {
            tabStore.dispatch({type: 'REMOVE_OTHER', payload: key});
          },
        },
        {
          label: t('home.contextMenu.clear'),
          onClick() {
            tabStore.dispatch({type: 'CLEAR'});
          },
        },
      ],
    });
  }

  return {onContextMenu, remove};
}