import { watchEffect } from 'vue'
import type { Directive } from 'vue'
import { hasIntersection, useGlobalStore } from '../../utils'

export const permission: Directive = {
  // 在元素更新时触发
  mounted(el: HTMLElement, binding) {
    const globalStore = useGlobalStore()
    const value = binding.value
    if (!value)
      return
    if (!hasIntersection(globalStore.permissions, value))
      el.parentNode?.removeChild(el)
  },
  updated(el, binding) {
    const update = () => {
      const globalStore = useGlobalStore()
      // 按钮权限码没有变化，不做处理
      const valueNotChange = binding.value === binding.oldValue
      // 判断用户本次和上次权限状态是否一样，一样也不用做处理
      const oldHasPermission = hasIntersection(globalStore.permissions, binding.oldValue)
      const newHasPermission = hasIntersection(globalStore.permissions, binding.value)
      const permissionNotChange = oldHasPermission === newHasPermission
      if (valueNotChange && permissionNotChange)
        return
      // 如果变成有权限，那么把元素添加回来
      if (newHasPermission) {
        addEl(el)
      }
      else {
        // 如果变成没有权限，则把元素删除
        removeEl(el)
      }
    }
    if (el._watchEffect) {
      update()
    }
    else {
      el._watchEffect = watchEffect(() => {
        update()
      })
    }
  },
}

function removeEl(el) {
  // 在绑定元素上存储父级元素
  el._parentNode = el.parentNode
  // 在绑定元素上存储一个注释节点
  el._placeholderNode = document.createComment('auth')
  // 使用注释节点来占位
  el.parentNode?.replaceChild(el._placeholderNode, el)
}

function addEl(el) {
  // 替换掉给自己占位的注释节点
  el._parentNode?.replaceChild(el, el._placeholderNode)
}