import { nextTick, unref } from 'vue';
import type { Ref } from 'vue';
import type { Options } from 'sortablejs';

export function useSortable(
  el: HTMLElement | Ref<HTMLElement>,
  elone?: HTMLElement | Ref<HTMLElement>,
  eltwo?: HTMLElement | Ref<HTMLElement>,
  options?: Options,
) {
  function initSortable() {
    nextTick(async () => {
      if (!el) return;
      const Sortable = (await import('sortablejs')).default;
      Sortable.create(unref(el), {
        animation: 500,
        delay: 400,
        delayOnTouchOnly: true,
        ...options,
        group: {
          put: false,
        },
        sort: false
      });
      if (elone) {
        Sortable.create(unref(elone), {
          animation: 500,
          delay: 400,
          delayOnTouchOnly: true,
          ...options,
          group: {
            put: false,
          },
        });
      }
      if (eltwo) {
        Sortable.create(unref(eltwo), {
          animation: 500,
          delay: 400,
          delayOnTouchOnly: true,
          ...options,
          group: {
            put: false,
          },
          sort: false
        });
      }
    });
  }

  return { initSortable };
}
