import KNode from 'core/kdom/knode'
import type { KNodeDirective, KNodeWithData } from 'types/knode'
import { enter, leave } from 'web/runtime/modules/transition'

// recursively search for possible transition defined inside the component root
function locateNode(knode: KNode | KNodeWithData): KNodeWithData {
  // @ts-expect-error
  return knode.componentInstance && (!knode.data || !knode.data.transition)
    ? locateNode(knode.componentInstance._knode!)
    : knode
}

export default {
  bind(el: any, { value }: KNodeDirective, knode: KNodeWithData) {
    knode = locateNode(knode)
    const transition = knode.data && knode.data.transition
    const originalDisplay = (el.__kOriginalDisplay =
      el.style.display === 'none' ? '' : el.style.display)
    if (value && transition) {
      knode.data.show = true
      enter(knode, () => {
        el.style.display = originalDisplay
      })
    } else {
      el.style.display = value ? originalDisplay : 'none'
    }
  },

  update(el: any, { value, oldValue }: KNodeDirective, knode: KNodeWithData) {
    /* istanbul ignore if */
    if (!value === !oldValue) return
    knode = locateNode(knode)
    const transition = knode.data && knode.data.transition
    if (transition) {
      knode.data.show = true
      if (value) {
        enter(knode, () => {
          el.style.display = el.__kOriginalDisplay
        })
      } else {
        leave(knode, () => {
          el.style.display = 'none'
        })
      }
    } else {
      el.style.display = value ? el.__kOriginalDisplay : 'none'
    }
  },

  unbind(
    el: any,
    binding: KNodeDirective,
    knode: KNodeWithData,
    oldKnode: KNodeWithData,
    isDestroy: boolean
  ) {
    if (!isDestroy) {
      el.style.display = el.__kOriginalDisplay
    }
  }
}