import { App, DirectiveBinding, VNode, createVNode } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";

import { listener, removeListener } from "@/helper";

const confirmEvent = (binding: DirectiveBinding) => {
  Modal.confirm({
    title: "请确认您的操作",
    content: "确定删除该内容吗？",
    icon: createVNode(ExclamationCircleOutlined),
    okType: "danger",
    onOk: () => binding.value.call(),
  });
};

const bind = (
  el: HTMLElement | Element,
  binding: DirectiveBinding,
  vnode: VNode
) => {
  listener(el, () => confirmEvent(binding));
};

const unbind = (el: HTMLElement, binding: DirectiveBinding) => {
  removeListener(el, () => confirmEvent(binding));
};

const VueConfirmDirective = {
  install: (app: App<Element>) => {
    app.directive("confirm", {
      mounted: bind,
      unmounted: unbind,
    });
  },
};

export default VueConfirmDirective;