import { h, ref } from "vue";

export default {
  name: 'App',
  setup() {
    const count = ref(0);
    // 把count赋值给window,然后在控制台中来改变数据，看看流程是咋样变化的
    window.count = count
    return {
      count
    };
  },
  render() {
    return h('div', { pId: '"helloWorld"' }, [
      h('p', {}, 'hello world'),
      h('p', {}, `count的值是： ${this.count}`),
    ])
  }
}

instance.update = effect(componentUpdateFn, {
      scheduler: () => {
        queueJob(instance.update);
      },
    });

let oldProps = {a: 1}
let newProps = {a:1,b:2}

for (const key in newProps) {
      const prevProp = oldProps[key];
      const nextProp = newProps[key];
      if (prevProp !== nextProp) {
        // 新增属性
      }
    }

let oldProps = {a: 1, c: 4}
let newProps = {a:1}

let oldProps = {a: 2}
let newProps = {a:1}

/**
 * 
 * @param el 更新的真实dom
 * @param key 属性的key
 * @param preValue 旧的值
 * @param nextValue 新的值
 */
function hostPatchProp(el, key, preValue, nextValue){
   // 传入的key,是不是事件处理函数
    if (isOn(key)) {
    // 添加事件处理函数的时候需要注意一下
    // 1. 添加的和删除的必须是一个函数，不然的话 删除不掉
    //    那么就需要把之前 add 的函数给存起来，后面删除的时候需要用到
    // 2. nextValue 有可能是匿名函数，当对比发现不一样的时候也可以通过缓存的机制来避免注册多次
    // 缓存所有的事件函数
    
    const invokers = el._vei || (el._vei = {});
    const existingInvoker = invokers[key];
    
    // 属性存在，直接修改
    if (nextValue && existingInvoker) {
      existingInvoker.value = nextValue;
    } else {
    // 属性不存在，进行新增或者删除事件
      const eventName = key.slice(2).toLowerCase();
      // 注册事件
      if (nextValue) {
        const invoker = (invokers[key] = nextValue);
        el.addEventListener(eventName, invoker);
      } else {
      // 移除事件
        el.removeEventListener(eventName, existingInvoker);
        invokers[key] = undefined;
      }
    }
  } else {
  // 新的值不存在，直接删除操作
    if (nextValue === null || nextValue === "") {
      el.removeAttribute(key);
    } else {
    
    // 反之存在则进行添加新的属性
      el.setAttribute(key, nextValue);
    }
  }
}

// 咋们的新老节点分别为n1, n2
const n1 = [{ value: 'A', key: 'A' }, { value: 'B', key: 'B' }, { value: 'C', key: 'C' }]
const n2 = [{ value: 'D', key: 'D' }, { value: 'E', key: 'E' }, { value: 'B', key: 'B' }, { value: 'C', key: 'C' }]

// 上面咋们知道了，左侧id的位置，那么接下来咋们来确定右侧的位置
while (i <= e1 && i <= e2) {
  if (isSame(n1[e1], n2[e2])) {
    e1--
    e2--
  } else {
    break
  }
}

// 咋们的新老节点分别为n1, n2
const n71 = [{ value: 'A', key: 'A' }, { value: 'B', key: 'B' }, { value: 'C', key: 'C' }, { value: 'D', key: 'D' }, { value: 'E', key: 'E' }]
const n72 = [{ value: 'A', key: 'A' }, { value: 'C', key: 'C' }, { value: 'D', key: 'D' }, , { value: 'B', key: 'B' }, { value: 'E', key: 'E' }]

// 在这种情况下，节点C和节点D的位置是没有变化的，之哟节点B是变化了的,所以咋们只要移动节点B
// 我们人知道需要移动节点B呢？ 
移动的条件： 如果从老节点的newIndex 一直都是升序的话，机不需要移动，反之则移动，使用最长子序列来规定最小的移动范围

const diff = (n1, n2) => {
  const copyN1 = JSON.parse(JSON.stringify(n1))
  let i = 0;
  let e1 = n1.length - 1
  let e2 = n2.length - 1
  // 确定起始的位置i
  while (i <= e1 && i <= e2) {
    if (isSame(n1[i], n2[i])) {
      i++
    } else {
      break
    }
  }

  // 确定结束位置
  while (i <= e1 && i <= e2) {
    if (isSame(n1[e1], n2[e2])) {
      e1--
      e2--
    } else {
      break
    }
  }

  // 条件一， 新节点比老节点长
  // 条件1.1 新节点的右侧比老节点长
  // 当 i > e1 时候，并且 i <= e2 的时候，咋们就可以确定新节点的右侧比老节点长

  if (i > e1 && i <= e2) {

    while (i <= e2) {
      // 增加新的节点i
      copyN1.splice(i, 0, n2[i])
      i++
    }
  } else if (i <= e1 && i > e2) {
    // 新的节点比老的节点短,进行删除老的节点
    while (i <= e1) {
      copyN1.splice(i, 1)
      i++
    }
  } else {

    //处理中间节点
    let s1 = i, s2 = i;
    // 对新节点建立索引，给缓存起来，
    const keyToNewIndexMap = new Map();
    // 是否需要移动
    let moved = false;
    // 最大新节点索引
    let maxNewIndexSoFar = 0;
    // 收集新节点的key
    for (let i = s2; i <= e2; i++) {
      keyToNewIndexMap.set(n2[i].key, i)
    }
    // 需要处理新节点的数量
    const toBePatched = e2 - s2 + 1;

    // 对老节点建立索引映射， 初始化为 0 , 后面处理的时候 如果发现是 0 的话，那么就说明新值在老的里面不存在
    const newIndexToOldIndexMap = new Array(toBePatched).fill(0)

    // 遍历老节点，需要把老节点有的，而新节点没有的给删除
    for (let i = s1; i <= e1; i++) {
      let newIndex;
      // 存在key,从缓存中取出新节点的索引
      if (n1[i].key && n1[i].key == null) {
        newIndex = keyToNewIndexMap.get(n1[i].key)
      } else {
        // 不存在key,遍历新节点，看看能不能在新节点中找到老节点
        for (let j = s2; j <= e2; j++) {
          if (isSame(n1[i], n2[j])) {
            newIndex = j
            break
          }
        }
      }
      // 如果newIndex 不存在，则是老节点中有的，而新节点没有，删除
      if (newIndex === undefined) {
        copyN1.splice(i, 1)
      } else {
        // 老节点在新节点中存在

        // 把老节点的索引记录下来， +1 的原因是怕，i 恰好为0
        newIndexToOldIndexMap[newIndex - s2] = i + 1

        // 新的 newIndex 如果一直是升序的话，那么就说明没有移动
        if (newIndex >= maxNewIndexSoFar) {
          maxNewIndexSoFar = newIndex
        } else {
          moved = true
        }
      }
    }

    // 利用最长递增子序列来优化移动逻辑
    // 因为元素是升序的话，那么这些元素就是不需要移动的
    // 而我们就可以通过最长递增子序列来获取到升序的列表
    // 在移动的时候我们去对比这个列表，如果对比上的话，就说明当前元素不需要移动
    const increasingNewIndexSequence = moved
      ? getSequence(newIndexToOldIndexMap)
      : [];


    //  increasingNewIndexSequence 返回的是最长递增子序列的索引 
    let j = 0;

    // 遍历新节点，
    for (let i = 0; i < toBePatched; i++) {
      // 如果新节点在老节点中不存在，则创建
      if (newIndexToOldIndexMap[i] === 0) {
        copyN1.splice(i + s2, 0, n2[i + s2])
      } else if (moved) {
        // 新老节点都存在，需要进行移动位置
        if (j > increasingNewIndexSequence.length - 1 || i !== increasingNewIndexSequence[j]) {
        // 先删掉节点，然后插入 即是移动
          copyN1.splice(newIndexToOldIndexMap[i] - 1, 1)
          copyN1.splice(i + s2, 0, n2[i + s2])
        } else {
          j++
        }
      }
    }
  }