import React, {
  useState,
  useEffect,
  useContext,
  useCallback,
  useMemo,
  useRef,
  useImperativeHandle,
  useLayoutEffect,
  forwardRef,
} from "react";
import ReactDOM from "react-dom";
const themes = {
  foreground: "red",
  background: "#eeeeee",
};
const ThemeContext = React.createContext(themes);

const Home = forwardRef((props, ref) => {
  debugger;
  const [count, setCount] = useState(0);
  const myRef = useRef(null);
  const theme = useContext(ThemeContext);
  useEffect(() => {
    console.log("useEffect", count);
  }, [count]);
  useLayoutEffect(() => {
    console.log("useLayoutEffect...", myRef);
  });
  const res = useMemo(() => {
    console.log("useMemo");
    return count * count;
  }, [count]);
  console.log("res...", res);
  useImperativeHandle(ref, () => ({
    focus: () => {
      myRef.current.focus();
    },
  }));

  const onClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return (
    <div style={{ color: theme.foreground }} ref={myRef} onClick={onClick}>
      {count}
    </div>
  );
});

ReactDOM.render(<Home />, document.getElementById("root"));

var fiber = {
  alternate,
  child,
  elementType: () => {},
  memoizedProps: null,
  memoizedState: null, // 在函數(shù)組件中，memoizedState用于保存hook鏈表
  pendingProps: {},
  return,
  sibling,
  stateNode,
  tag, // fiber的類型，函數(shù)組件對應(yīng)的tag為2
  type: () => {}
  updateQueue: null,
}

var hook = {
  memoizedState,,
  baseState,
  baseQueue,
  queue,
  next,
};

hook.queue = {
  pending: null,
  dispatch: null,
  lastRenderedReducer: basicStateReducer,
  lastRenderedState: initialState,
};

const onClick = useCallback(() => {
  debugger;
  setCount(count + 1);
  setCount(2);
  setCount(3);
}, [count]);

var update = {
  lane: lane,
  action: action, // setCount的參數(shù)
  eagerReducer: null,
  eagerState: null,
  next: null,
};

const myRef = useRef(null);

hook.memoizedState = {
  current,
};

var effect = {
  tag: tag, // effect的類型，useEffect對應(yīng)的tag為5，useLayoutEffect對應(yīng)的tag為3
  create: create, // useEffect或者useLayoutEffect的監(jiān)聽函數(shù)，即第一個參數(shù)
  destroy: destroy, // useEffect或者useLayoutEffect的清除函數(shù)，即監(jiān)聽函數(shù)的返回值
  deps: deps, // useEffect或者useLayoutEffect的依賴，第二個參數(shù)
  // Circular
  next: null, // 在updateQueue中使用，將所有的effect連成一個鏈表
};

const effect = {
    create: () => { console.log("useEffect", count); },
    deps: [0]
    destroy: undefined,
    tag: 5,
}
effect.next = effect
fiber.updateQueue = {
  lastEffect: effect,
};

const res = useMemo(() => {
  return count * count;
}, [count]);

hook.memoizedState = [count * count, [count]];

const onClick = useCallback(callback dep);

var HooksDispatcherOnMount = {
  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useImperativeHandle: mountImperativeHandle,
  useLayoutEffect: mountLayoutEffect,
  useMemo: mountMemo,
  useRef: mountRef,
  useState: mountState,
};
var HooksDispatcherOnUpdate = {
  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useLayoutEffect: updateLayoutEffect,
  useMemo: updateMemo,
  useRef: updateRef,
  useState: updateState,
};

function renderWithHooks(current, workInProgress, Component, props) {
  currentlyRenderingFiber = workInProgress;
  workInProgress.memoizedState = null;
  workInProgress.updateQueue = null;
  ReactCurrentDispatcher.current =
    current === null || current.memoizedState === null
      ? HooksDispatcherOnMount
      : HooksDispatcherOnUpdate;
  var children = Component(props, secondArg);
  currentlyRenderingFiber = null;
  currentHook = null;
  workInProgressHook = null;

  return children;
}

function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}
function resolveDispatcher() {
  var dispatcher = ReactCurrentDispatcher.current;
  return dispatcher;
}

function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
  var hook = mountWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  currentlyRenderingFiber.flags |= fiberFlags;
  hook.memoizedState = pushEffect(
    HasEffect | hookFlags,
    create,
    undefined,
    nextDeps
  );
}

function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var destroy = undefined;
  if (currentHook !== null) {
    var prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;
    if (nextDeps !== null) {
      var prevDeps = prevEffect.deps;
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }
  currentlyRenderingFiber.flags |= fiberFlags;
  hook.memoizedState = pushEffect(
    HasEffect | hookFlags,
    create,
    destroy,
    nextDeps
  );
}

function mountWorkInProgressHook() {
  var hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null,
  };
  if (workInProgressHook === null) {
    // hook鏈表中的第一個hook
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
  } else {
    // 添加到hook鏈表末尾
    workInProgressHook = workInProgressHook.next = hook;
  }

  return workInProgressHook;
}

var firstFiber = {
  ..., // 省略其他屬性
  alternate: null, // 由于是第一次渲染，alternate為null
  memoizedState, // 第一次渲染構(gòu)建的hook鏈表
  updateQueue, // 第一次渲染收集的effect list
};

if (currentHook === null) {
  var current = currentlyRenderingFiber.alternate;
  if (current !== null) {
    nextCurrentHook = current.memoizedState;
  } else {
    nextCurrentHook = null;
  }
}
currentHook = nextCurrentHook;

var newHook = {
  memoizedState: currentHook.memoizedState,
  baseState: currentHook.baseState,
  baseQueue: currentHook.baseQueue,
  queue: currentHook.queue,
  next: null, // 注意，next被重置了!!!!!
};

if (workInProgressHook === null) {
  currentlyRenderingFiber.memoizedState = workInProgressHook = newHook;
}

if (currentHook === null) {
} else {
  nextCurrentHook = currentHook.next;
}
currentHook = nextCurrentHook;

function updateWorkInProgressHook() {
  var nextCurrentHook;
  if (currentHook === null) {
    var current = currentlyRenderingFiber$1.alternate;
    if (current !== null) {
      nextCurrentHook = current.memoizedState;
    } else {
      nextCurrentHook = null;
    }
  } else {
    nextCurrentHook = currentHook.next;
  }
  var nextWorkInProgressHook;
  if (workInProgressHook === null) {
    nextWorkInProgressHook = currentlyRenderingFiber$1.memoizedState;
  } else {
    nextWorkInProgressHook = workInProgressHook.next;
  }
  if (nextWorkInProgressHook !== null) {
    // There's already a work-in-progress. Reuse it.
    workInProgressHook = nextWorkInProgressHook;
    nextWorkInProgressHook = workInProgressHook.next;
    currentHook = nextCurrentHook;
  } else {
    // Clone from the current hook.
    if (!(nextCurrentHook !== null)) {
      {
        throw Error(formatProdErrorMessage(310));
      }
    }
    currentHook = nextCurrentHook;
    var newHook = {
      memoizedState: currentHook.memoizedState,
      baseState: currentHook.baseState,
      baseQueue: currentHook.baseQueue,
      queue: currentHook.queue,
      next: null,
    };
    if (workInProgressHook === null) {
      // This is the first hook in the list.
      currentlyRenderingFiber$1.memoizedState = workInProgressHook = newHook;
    } else {
      // Append to the end of the list.
      workInProgressHook = workInProgressHook.next = newHook;
    }
  }
  return workInProgressHook;
}