const obj = reactive({ foo: 1 });

effect(() => {
  console.log(obj.foo);
})

obj.foo++;
obj.foo++;

it('scheduler', () => {
  let dummy;
  let run: any;
  const scheduler = jest.fn(() => {
    run = runner;
  });
  const obj = reactive({ foo: 1 });
  const runner = effect(
    () => {
      dummy = obj.foo;
    },
    { scheduler },
  );
  expect(scheduler).not.toHaveBeenCalled();
  expect(dummy).toBe(1);
  // should be called on first trigger
  obj.foo++;
  expect(scheduler).toHaveBeenCalledTimes(1);
  // should not run yet
  expect(dummy).toBe(1);
  // manually run
  run();
  // should have run
  expect(dummy).toBe(2);
});

class ReactiveEffect {
  private _fn: any;

  // + 接收scheduler
  // + 在構(gòu)造函數(shù)的參數(shù)上使用public等同于創(chuàng)建了同名的成員變量
  constructor(fn, public scheduler?) {
    this._fn = fn;
  }

  run() {
    activeEffect = this;
    return this._fn();
  }
}

// * ============================== ↓ 依賴收集 track ↓ ============================== * //
// * targetMap: target -> key
const targetMap = new WeakMap();

// * target -> key -> dep
export function track(target, key) {
  // * depsMap: key -> dep
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }

  // * dep
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }

  dep.add(activeEffect);
}

// * ============================== ↓ 觸發(fā)依賴 trigger ↓ ============================== * //
export function trigger(target, key) {
  let depsMap = targetMap.get(target);
  let dep = depsMap.get(key);

  for (const effect of dep) {
    // + 判斷是否有scheduler, 有則執(zhí)行，無則執(zhí)行fn
    if (effect.scheduler) {
      effect.scheduler();
    } else {
      effect.run();
    }
  }
}

let activeEffect;

export function effect(fn, options: any = {}) {
  // + 直接將scheduler掛載到依賴上
  const _effect = new ReactiveEffect(fn, options.scheduler);

  _effect.run();

  return _effect.run.bind(_effect);
}

it('job queue', () => {
  // 定義一個任務(wù)隊列
  const jobQueue = new Set();
  // 使用 Promise.resolve() 創(chuàng)建一個 Promise 實例，我們用它將一個任務(wù)添加到微任務(wù)隊列
  const p = Promise.resolve();

  // 一個標(biāo)志代表是否正在刷新隊列
  let isFlushing = false;

  function flushJob() {
    // 如果隊列正在刷新，則什么都不做
    if (isFlushing) return;
    // 設(shè)置為true，代表正在刷新
    isFlushing = true;
    // 在微任務(wù)隊列中刷新 jobQueue 隊列
    p.then(() => {
      jobQueue.forEach((job: any) => job());
    }).finally(() => {
      // 結(jié)束后重置 isFlushing
      isFlushing = false;
      // 雖然scheduler執(zhí)行兩次，但是由于是Set，所以只有一項
      expect(jobQueue.size).toBe(1);
      // 期望最終結(jié)果拿數(shù)組存儲后進行斷言
      expect(logArr).toEqual([1, 3]);
    });
  }

  const obj = reactive({ foo: 1 });
  let logArr: number[] = [];

  effect(
    () => {
      logArr.push(obj.foo);
    },
    {
      scheduler(fn) {
        // 每次調(diào)度時，將副作用函數(shù)添加到 jobQueue 隊列中
        jobQueue.add(fn);
        // 調(diào)用 flushJob 刷新隊列
        flushJob();
      },
    },
  );

  obj.foo++;
  obj.foo++;

  expect(obj.foo).toBe(3);
});

for (const effect of dep) {
  // + 判斷是否有scheduler, 有則執(zhí)行，無則執(zhí)行fn
  if (effect.scheduler) {
    effect.scheduler(effect._fn);
  } else {
    effect.run();
  }
}