// packages/runtime-core/src/component.ts
export const enum LifecycleHooks {
    BEFORE_CREATE = 'bc', // 創(chuàng)建之前
    CREATED = 'c', // 創(chuàng)建
    BEFORE_MOUNT = 'bm', // 掛載之前
    MOUNTED = 'm', // 掛載之后
    BEFORE_UPDATE = 'bu', // 更新之前
    UPDATED = 'u', // 更新之后
    BEFORE_UNMOUNT = 'bum', // 卸載之前
    UNMOUNTED = 'um', // 卸載之后
	// ...
}

// packages/runtime-core/src/apiLifecycle.ts
export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT)
export const onMounted = createHook(LifecycleHooks.MOUNTED)
export const onBeforeUpdate = createHook(LifecycleHooks.BEFORE_UPDATE)
export const onUpdated = createHook(LifecycleHooks.UPDATED)
export const onBeforeUnmount = createHook(LifecycleHooks.BEFORE_UNMOUNT)
export const onUnmounted = createHook(LifecycleHooks.UNMOUNTED)

// packages/runtime-core/src/apiLifecycle.ts
export const createHook = (lifecycle) => (hook, target = currentInstance) => injectHook(lifecycle, hook, target)

// packages/runtime-core/src/apiLifecycle.ts
export function injectHook(type, hook, target) {
    if(target) {
        // 把各個生命周期的Hooks函數(shù)掛載到組件實例上，并且是一個數(shù)組，因為可能你會多次調(diào)用同一個組件的同一個生命周期函數(shù)
        const hooks = target[type] || (target[type] = [])
        // 把生命周期函數(shù)進行包裝并且把包裝函數(shù)緩存在__weh上
        const wrappedHook =
        hook.__weh ||
        (hook.__weh = (...args: unknown[]) => {
          if (target.isUnmounted) {
            return
          }
            // 當生命周期調(diào)用時 保證currentInstance是正確的
            setCurrentInstance(target)
            // 執(zhí)行生命周期Hooks函數(shù)
            const  res = args ? hook(...args) : hook()
            unsetCurrentInstance()
          return res
        })
        // 把生命周期的包裝函數(shù)綁定到組件實例對應(yīng)的hooks上
        hooks.push(wrappedHook)
        // 返回包裝函數(shù)
        return wrappedHook
    }
}

instance.update = effect(() => {
    if (!instance.isMounted) {
        const { bm, m } = instance
        // 生命周期：beforeMount hook
        if (bm) {
            invokeArrayFns(bm)
        }
        // 組件初始化的時候會執(zhí)行這里
        // 為什么要在這里調(diào)用 render 函數(shù)呢
        // 是因為在 effect 內(nèi)調(diào)用 render 才能觸發(fā)依賴收集
        // 等到后面響應(yīng)式的值變更后會再次觸發(fā)這個函數(shù)  
        const subTree = (instance.subTree = renderComponentRoot(instance))
        patch(null, subTree, container, instance, anchor)
        instance.vnode.el = subTree.el 
        instance.isMounted = true
        // 生命周期：mounted
        if(m) {
            // mounted需要通過Scheduler的函數(shù)來調(diào)用
            queuePostFlushCb(m)
        }
    } else {
        // 響應(yīng)式的值變更后會從這里執(zhí)行邏輯
        // 主要就是拿到新的 vnode ，然后和之前的 vnode 進行對比
        // 拿到最新的 subTree
        const { bu, u, next, vnode } = instance
        // 如果有 next 的話， 說明需要更新組件的數(shù)據(jù)（props，slots 等）
        // 先更新組件的數(shù)據(jù)，然后更新完成后，在繼續(xù)對比當前組件的子元素
        if(next) {
            next.el = vnode.el
            updateComponentPreRender(instance, next)
        }
        // 生命周期：beforeUpdate hook
        if (bu) {
            invokeArrayFns(bu)
        }
        const subTree = renderComponentRoot(instance)
        // 替換之前的 subTree
        const prevSubTree = instance.subTree
        instance.subTree = subTree
        // 用舊的 vnode 和新的 vnode 交給 patch 來處理
        patch(prevSubTree, subTree, container, instance, anchor)
        // 生命周期：updated hook
        if (u) {
            // updated 需要通過Scheduler的函數(shù)來調(diào)用
            queuePostFlushCb(u)
        }
    }
}, {
    scheduler() {
        queueJobs(instance.update)
    }
})

export const invokeArrayFns = (fns: Function[], arg?: any) => {
  for (let i = 0; i < fns.length; i++) {
    fns[i](arg)
  }
}

export function queuePreFlushCb(cb: SchedulerJob) {
  queueCb(cb, activePreFlushCbs, pendingPreFlushCbs, preFlushIndex)
}

export function queueJob(job: SchedulerJob) {
}

export function queuePostFlushCb(cb: SchedulerJobs) {
  queueCb(cb, activePostFlushCbs, pendingPostFlushCbs, postFlushIndex)
}

function flushJobs(seen?) {
    isFlushPending = false
    // 組件更新前隊列執(zhí)行
    flushPreFlushCbs(seen)
    try{
        // 組件更新隊列執(zhí)行
        let job
        while (job = queue.shift()) {
            job && job()
        }
    } finally {
        // 組件更新后隊列執(zhí)行
        flushPostFlushCbs(seen)
        // 如果在執(zhí)行異步任務(wù)的過程中又產(chǎn)生了新的隊列，那么則繼續(xù)回調(diào)執(zhí)行
        if (
            queue.length ||
            pendingPreFlushCbs.length ||
            pendingPostFlushCbs.length
        ) {
            flushJobs(seen)
        }
    }
}

if (next) {
    next.el = vnode.el
    // 在組件更新前，先更新一些數(shù)據(jù)
    updateComponentPreRender(instance, next, optimized)
} else {
    next = vnode
}

  const updateComponentPreRender = (
    instance: ComponentInternalInstance,
    nextVNode: VNode,
    optimized: boolean
  ) => {
    nextVNode.component = instance
    const prevProps = instance.vnode.props
    instance.vnode = nextVNode
    instance.next = null
    // 更新props
    updateProps(instance, nextVNode.props, prevProps, optimized)
    // 更新slots
    updateSlots(instance, nextVNode.children, optimized)
	// ...
  }

if (update) {
    // 把組件更新函數(shù)的active設(shè)置false
    update.active = false
    unmount(subTree, instance, parentSuspense, doRemove)
}

const job = queue[flushIndex]
// 那些job的active為false的則不執(zhí)行
if (job && job.active !== false) {
    callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
}

invalidateJob(instance.update)
// 立即執(zhí)行更新任務(wù)
instance.update()

export function invalidateJob(job: SchedulerJob) {
  // 找到 job 的索引
  const i = queue.indexOf(job)
  if (i > flushIndex) {
    // 刪除 Job
    queue.splice(i, 1)
  }
}

export interface SchedulerJob extends Function {
  id?: number  // 用于對隊列中的 job 進行排序，id 小的先執(zhí)行
  active?: boolean
  computed?: boolean
  allowRecurse?: boolean 
  ownerInstance?: ComponentInternalInstance	
}

const queue: SchedulerJob[] = []

// 按任務(wù)id大小排序
queue.sort((a, b) => getId(a) - getId(b))
try {
    for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
        const job = queue[flushIndex]
        if (job && job.active !== false) {
            // 使用帶有 Vue 內(nèi)部的錯誤處理函數(shù)執(zhí)行job
            callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
        }
    }
} finally {
    // 清空 queue 隊列
    flushIndex = 0
    queue.length = 0
}

let uid = 0 // 初始化為0
export function createComponentInstance(
  vnode
  parent
  suspense
) {
  const instance: ComponentInternalInstance = {
    uid: uid++,
   // ...   
  }

const update = (instance.update = effect.run.bind(effect) as SchedulerJob)
update.id = instance.uid

export function queueJob(job: SchedulerJob) {
	// 沒有id的則push到最后
    if (job.id == null) {
      queue.push(job)
    } else {
      // 進行插隊處理
      queue.splice(findInsertionIndex(job.id), 0, job)
    }
    queueFlush()
}