import Vue, { VueConstructor } from 'vue';
import { WebBehaviorCollector } from '@tencent/merlin-behavior-web';

export function registerHoverHook(app: VueConstructor<Vue>, behaviorCollector: WebBehaviorCollector) {
  app.directive('ml-hover', {
    inserted(el, _binding, vnode) {
      const extInfo = vnode?.data?.attrs?.['ml-extends'];
      behaviorCollector.hover(el, extInfo);
    },
    componentUpdated(el, _binding, vnode) {
      const extInfo = vnode?.data?.attrs?.['ml-extends'];
      behaviorCollector.hover(el, extInfo);
    },
    unbind(el) {
      behaviorCollector.deleteHover(el);
    },
  });
}