import type { App, Directive } from 'vue';
import { useAuthStore } from '@/store';
import { useRouterPush } from '@/composables';

export default function setupLoginDirective(app: App) {
  const auth = useAuthStore();
  const { toLogin } = useRouterPush(false);
  function listenerHandler(event: MouseEvent) {
    if (!auth.isLogin) {
      event.stopPropagation();
      toLogin();
    }
  }

  const loginDirective: Directive<HTMLElement, boolean | undefined> = {
    mounted(el: HTMLElement, binding) {
      if (binding.value === false) return;
      el.addEventListener('click', listenerHandler, { capture: true });
    },
    unmounted(el: HTMLElement, binding) {
      if (binding.value === false) return;
      el.removeEventListener('click', listenerHandler);
    }
  };

  app.directive('login', loginDirective);
}