const updateQueue = [
  <NoteList />,
  <NoteButton />,
  <NoteButton />,
  <NoteButton />,
  <NoteButton />,
];

function performWorkUntilDeadline() {
  while (updateQueue.length > 0 && !shouldYieldToHost()) {
    performUnitOfWork(updateQueue.shift());
  }

  if (updateQueue.length > 0) {
    schedulePerformWorkUntilDeadline();
  }
}

let startTime = performance.now(); // updated on every render

function shouldYieldToHost() {
  return (performance.now() - startTime) > 5; // ms
}


function schedulePerformWorkUntilDeadline() {
  // If setImmediate is supported (Node.js)
  if (setImmediate) {
    setImmediate(performWorkUntilDeadline);
  } else {
    // If only setTimeout is supported (old browsers)
    setTimeout(performWorkUntilDeadline, 0);
  }

  // If MessageChannel is supported (modern browsers)
  // This is a hack to avoid setTimeout()'s minimum delay.
  const channel = new MessageChannel();
  channel.port1.onmessage = performWorkUntilDeadline;
  channel.port2.postMessage(/* no message */);
}

function shouldYieldToHost(): boolean {
  const timeElapsed = getCurrentTime() - startTime;
  if (timeElapsed < frameInterval) {
    // The main thread has only been blocked for a really short amount of time;
    // smaller than a single frame. Don't yield yet.
    return false;
  }

  // The main thread has been blocked for a non-negligible amount of time. We
  // may want to yield control of the main thread, so the browser can perform
  // high priority tasks. The main ones are painting and user input. If there's
  // a pending paint or a pending input, then we should yield. But if there's
  // neither, then we can yield less often while remaining responsive. We'll
  // eventually yield regardless, since there could be a pending paint that
  // wasn't accompanied by a call to `requestPaint`, or other main thread tasks
  // like network events.
  if (enableIsInputPending) {
    if (needsPaint) {
      // There's a pending paint (signaled by `requestPaint`). Yield now.
      return true;
    }
    if (timeElapsed < continuousInputInterval) {
      // We haven't blocked the thread for that long. Only yield if there's a
      // pending discrete input (e.g. click). It's OK if there's pending
      // continuous input (e.g. mouseover).
      if (isInputPending !== null) {
        return isInputPending();
      }
    } else if (timeElapsed < maxInterval) {
      // Yield if there's either a pending discrete or continuous input.
      if (isInputPending !== null) {
        return isInputPending(continuousOptions);
      }
    } else {
      // We've blocked the thread for a long time. Even if there's no pending
      // input, there may be some other scheduled work that we don't know about,
      // like a network event. Yield now.
      return true;
    }
  }

  // `isInputPending` isn't available. Yield now.
  return true;
}

type Fiber = {
  // linking
  return: Fiber | null;
  child: Fiber | null;
  sibling: Fiber | null;

  type: any; // The resolved function/class associated with this fiber.
  tag: number; // FunctionComponent, ClassComponent, MemoComponent etc

  memoizedState: MemoizedState; // state
  updateQueue: UpdateQueue; // A queue of state updates and callbacks

  // priority
  lanes: number;
  childLanes: number;

  // props
  pendingProps: any; // Current props
  memoizedProps: any; // The props used to create the output.

  alternate: Fiber | null; // "The same" fiber from alternative tree
};

// https://github.com/facebook/react/blob/9212d994ba939f20a04220aef
const NoLane: Lane = 0b0000000000000000000000000000000;
const SyncLane: Lane = 0b0000000000000000000000000000001;
const TransitionLanes: Lanes = 0b0000000000001111111111111111110;
const IdleLane: Lanes = 0b0100000000000000000000000000000;
const OffscreenLane: Lane = 0b1000000000000000000000000000000;

export function mergeLanes(a: Lanes | Lane, b: Lanes | Lane): Lanes {
  return a | b;
}