import ReactDOM from 'react-dom/client';
ReactDOM.createRoot(root).render(<App />)

//createRoot.ts 文件
import {
  createContainer,
  updateContainer,
} from "../../react-reconciler/src/filerReconciler";
export function createRoot(container: Container) {
  const root = createContainer(container);
  return {
    render(element: ReactElementType) {
      updateContainer(element, root);
    },
  };
}

export const createInstance = (type: string, props: any): Instance => {
  // TODO 處理props
  const element = document.createElement(type);
  return element;
};
export const appendInitialChild = (
  parent: Instance | Container,
  child: Instance
) => {
  parent.appendChild(child);
};
export const createTextInstance = (content: string) => {
  return document.createTextNode(content);
};
export const appendChildToContainer = appendInitialChild;

/**
 * ReactDOM.createRoot()中調(diào)用
 * 1. 創(chuàng)建fiberRootNode 和 hostRootFiber。并建立聯(lián)系
 * @param {Container} container
 */
export function createContainer(container: Container) {
  const hostRootFiber = new FiberNode(HostRoot, {}, null);
  const fiberRootNode = new FiberRootNode(container, hostRootFiber);
  hostRootFiber.updateQueue = createUpdateQueue();
  return fiberRootNode;
}

/**
 * 頂部節(jié)點(diǎn)
 */
export class FiberRootNode {
  container: Container; // 不同環(huán)境的不同的節(jié)點(diǎn) 在瀏覽器環(huán)境 就是 root節(jié)點(diǎn)
  current: FiberNode;
  finishedWork: FiberNode | null; // 遞歸完成后的hostRootFiber
  constructor(container: Container, hostRootFiber: FiberNode) {
    this.container = container;
    this.current = hostRootFiber;
    hostRootFiber.stateNode = this;
    this.finishedWork = null;
  }
}
export class FiberNode {
  constructor(tag: WorkTag, pendingProps: Props, key: Key) {
    this.tag = tag;
    this.pendingProps = pendingProps;
    this.key = key;
    this.stateNode = null; // dom引用
    this.type = null; // 組件本身  FunctionComponent () => {}
    // 樹狀結(jié)構(gòu)
    this.return = null; // 指向父fiberNode
    this.sibling = null; // 兄弟節(jié)點(diǎn)
    this.child = null; // 子節(jié)點(diǎn)
    this.index = 0; // 兄弟節(jié)點(diǎn)的索引
    this.ref = null;
    // 工作單元
    this.pendingProps = pendingProps; // 等待更新的屬性
    this.memoizedProps = null; // 正在工作的屬性
    this.memoizedState = null;
    this.updateQueue = null;
    this.alternate = null; // 雙緩存樹指向(workInProgress 和 current切換）
    this.flags = NoFlags; // 副作用標(biāo)識(shí)
    this.subtreeFlags = NoFlags; // 子樹中的副作用
  }
}

/**
 * 初始化updateQueue
 * @returns {UpdateQueue<Action>}
 */
export const createUpdateQueue = <State>() => {
  return {
    shared: {
      pending: null,
    },
  } as UpdateQueue<State>;
};

/**
 * ReactDOM.createRoot().render 中調(diào)用更新
 * 1. 創(chuàng)建update, 并將其推到enqueueUpdate中
 */
export function updateContainer(
  element: ReactElementType | null,
  root: FiberRootNode
) {
  const hostRootFiber = root.current;
  const update = createUpdate<ReactElementType | null>(element);
  enqueueUpdate(
    hostRootFiber.updateQueue as UpdateQueue<ReactElementType | null>,
    update
  );
  // 插入更新后，進(jìn)入調(diào)度
  scheduleUpdateOnFiber(hostRootFiber);
  return element;
}

/**
 * 創(chuàng)建更新
 * @param {Action<State>} action
 * @returns {Update<State>}
 */
export const createUpdate = (action) => {
  return {
    action,
  };
};

/**
 * 更新update
 * @param {UpdateQueue<Action>} updateQueue
 * @param {Update<Action>} update
 */
export const enqueueUpdate = <State>(
  updateQueue: UpdateQueue<State>,
  update: Update<State>
) => {
  updateQueue.shared.pending = update;
};

export function scheduleUpdateOnFiber(fiber: FiberNode) {
  // todo 調(diào)度功能
  let root = markUpdateFromFiberToRoot(fiber);
  renderRoot(root);
}

// 從當(dāng)前觸發(fā)更新的fiber向上遍歷到根節(jié)點(diǎn)fiber
function markUpdateFromFiberToRoot(fiber: FiberNode) {
  let node = fiber;
  let parent = node.return;
  while (parent !== null) {
    node = parent;
    parent = node.return;
  }
  if (node.tag === HostRoot) {
    return node.stateNode;
  }
  return null;
}

function renderRoot(root: FiberRootNode) {
  // 初始化，將workInProgress 指向第一個(gè)fiberNode
  prepareFreshStack(root);
  do {
    try {
      workLoop();
      break;
    } catch (e) {
      if (__DEV__) {
        console.warn("workLoop發(fā)生錯(cuò)誤", e);
      }
      workInProgress = null;
    }
  } while (true);
  const finishedWork = root.current.alternate;
  root.finishedWork = finishedWork;
  // wip fiberNode樹  樹中的flags執(zhí)行對(duì)應(yīng)的操作
  commitRoot(root);
}

let workInProgress: FiberNode | null = null;
function prepareFreshStack(root: FiberRootNode) {
  workInProgress = createWorkInProgress(root.current, {});
}
export const createWorkInProgress = (
  current: FiberNode,
  pendingProps: Props
): FiberNode => {
  let wip = current.alternate;
  if (wip === null) {
    //mount
    wip = new FiberNode(current.tag, pendingProps, current.key);
    wip.stateNode = current.stateNode;
    wip.alternate = current;
    current.alternate = wip;
  } else {
    //update
    wip.pendingProps = pendingProps;
    // 清掉副作用（上一次更新遺留下來的）
    wip.flags = NoFlags;
    wip.subtreeFlags = NoFlags;
  }
  wip.type = current.type;
  wip.updateQueue = current.updateQueue;
  wip.child = current.child;
  wip.memoizedProps = current.memoizedProps;
  wip.memoizedState = current.memoizedState;
  return wip;
};

function workLoop() {
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}
function performUnitOfWork(fiber: FiberNode): void {
  const next = beginWork(fiber); // next 是fiber的子fiber 或者 是null
  // 工作完成，需要將pendingProps 復(fù)制給 已經(jīng)渲染的props
  fiber.memoizedProps = fiber.pendingProps;
  if (next === null) {
    // 沒有子fiber
    completeUnitOfWork(fiber);
  } else {
    workInProgress = next;
  }
}

/**
 * 遞歸中的遞階段
 * 比較 然后返回子fiberNode 或者null
 */
export const beginWork = (wip: FiberNode) => {
  switch (wip.tag) {
    case HostRoot:
      return updateHostRoot(wip);
    case HostComponent:
      return updateHostComponent(wip);
    case HostText:
      // 文本節(jié)點(diǎn)沒有子節(jié)點(diǎn)，所以沒有流程
      return null;
    default:
      if (__DEV__) {
        console.warn("beginWork未實(shí)現(xiàn)的類型");
      }
      break;
  }
  return null;
};

/**
	processUpdateQueue： 是根據(jù)不同的類型（函數(shù)和其他）生成memoizedState
*/
function updateHostRoot(wip: FiberNode) {
  const baseState = wip.memoizedState;
  const updateQueue = wip.updateQueue as UpdateQueue<ElementType>;
  // 這里獲取之前的更新隊(duì)列
  const pending = updateQueue.shared.pending;
  updateQueue.shared.pending = null;
  const { memoizedState } = processUpdateQueue(baseState, pending); // 最新狀態(tài)
  wip.memoizedState = memoizedState; // 其實(shí)就是傳入的element
  const nextChildren = wip.memoizedState; // 就是我們傳入的ReactElement 對(duì)象
  reconcileChildren(wip, nextChildren);
  return wip.child;
}

/**
	wip: 當(dāng)前正在執(zhí)行的父fiberNode
	children: 即將要生成的子fiberNode
*/
function reconcileChildren(wip: FiberNode, children?: ReactElementType) {
  const current = wip.alternate;
  if (current !== null) {
    // update
    wip.child = reconcilerChildFibers(wip, current?.child, children);
  } else {
    // mount
    wip.child = mountChildFibers(wip, null, children);
  }
}
function reconcilerChildFibers(
    returnFiber: FiberNode,
    currentFiber: FiberNode | null,
    newChild?: ReactElementType | string | number
  ) {
    // 判斷當(dāng)前fiber的類型
    if (typeof newChild === "object" && newChild !== null) {
      switch (newChild.$$typeof) {
        case REACT_ELEMENT_TYPE:
          return placeSingleChild(
            reconcileSingleElement(returnFiber, currentFiber, newChild)
          );
        default:
          if (__DEV__) {
            console.warn("未實(shí)現(xiàn)的reconcile類型", newChild);
          }
          break;
      }
    }
    // Todo 多節(jié)點(diǎn)的情況 ul > li * 3
    // HostText
    if (typeof newChild === "string" || typeof newChild === "number") {
      return placeSingleChild(
        reconcileSingleTextNode(returnFiber, currentFiber, newChild)
      );
    }
    if (__DEV__) {
      console.warn("未實(shí)現(xiàn)的reconcile類型", newChild);
    }
    return null;
  };
}

  /**
   * 根據(jù)reactElement對(duì)象創(chuàng)建fiber并返回
   */
  function reconcileSingleElement(
    returnFiber: FiberNode,
    _currentFiber: FiberNode | null,
    element: ReactElementType
  ) {
    const fiber = createFiberFromElement(element);
    fiber.return = returnFiber;
    return fiber;
  }
export function createFiberFromElement(element: ReactElementType): FiberNode {
  const { type, key, props } = element;
  let fiberTag: WorkTag = FunctionComponent;
  if (typeof type === "string") {
    // <div/>  type : 'div'
    fiberTag = HostComponent;
  } else if (typeof type !== "function" && __DEV__) {
    console.log("未定義的type類型", element);
  }
  const fiber = new FiberNode(fiberTag, props, key);
  fiber.type = type;
  return fiber;
}

// 省略無關(guān)代碼
function reconcileChildren(wip: FiberNode, children?: ReactElementType) {
    wip.child = reconcilerChildFibers(wip, current?.child, children);
}

  function updateHostRoot(wip) {
      const baseState = wip.memoizedState;
      reconcileChildren(wip, nextChildren);
      return wip.child;
  }

export const beginWork = (wip: FiberNode) => {
  switch (wip.tag) {
    case HostRoot:
      return updateHostRoot(wip);
  }
}

  function performUnitOfWork(fiber) {
      const next = beginWork(fiber); // next 是fiber的子fiber 或者 是null
      // 工作完成，需要將pendingProps 復(fù)制給 已經(jīng)渲染的props
      fiber.memoizedProps = fiber.pendingProps;
      if (next === null) {
          // 沒有子fiber
          completeUnitOfWork(fiber);
      }
      else {
          workInProgress = next;
      }
  }

  function workLoop() {
      while (workInProgress !== null) {
          performUnitOfWork(workInProgress);
      }
  }

const jsx = <div><span>hcc</span></div>
const root = document.querySelector('#root')
ReactDOM.createRoot(root).render(jsx)

function completeUnitOfWork(fiber) {
  let node = fiber;
  do {
      completeWork(node);
      const sibling = node.sibling;
      if (sibling !== null) {
          workInProgress = sibling;
          return;
      }
      node = node.return;
      workInProgress = node;
  } while (node !== null);
}

/**
 * 遞歸中的歸
 */
export const completeWork = (wip: FiberNode) => {
  const newProps = wip.pendingProps;
  const current = wip.alternate;
  switch (wip.tag) {
    case HostComponent:
      if (current !== null && wip.stateNode) {
        //update
      } else {
        // 1. 構(gòu)建DOM
        const instance = createInstance(wip.type, newProps);
        // 2. 將DOM插入到DOM樹中
        appendAllChildren(instance, wip);
        wip.stateNode = instance;
      }
      bubbleProperties(wip);
      return null;
    case HostText:
      if (current !== null && wip.stateNode) {
        //update
      } else {
        // 1. 構(gòu)建DOM
        const instance = createTextInstance(newProps.content);
        // 2. 將DOM插入到DOM樹中
        wip.stateNode = instance;
      }
      bubbleProperties(wip);
      return null;
    case HostRoot:
      bubbleProperties(wip);
      return null;
    default:
      if (__DEV__) {
        console.warn("未實(shí)現(xiàn)的completeWork");
      }
      break;
  }
};
// 根據(jù)邏輯判斷，走到下面的邏輯判斷，傳入了文本
// 1. 構(gòu)建DOM 
const instance = createTextInstance(newProps.content); 
// 2. 將DOM插入到DOM樹中 
wip.stateNode = instance;

// 1. 構(gòu)建DOM
const instance = createInstance(wip.type);
// 2. 將DOM插入到DOM樹中
appendAllChildren(instance, wip);
wip.stateNode = instance;

/**
 * 在parent的節(jié)點(diǎn)下，插入wip
 * @param {FiberNode} parent
 * @param {FiberNode} wip
 */
function appendAllChildren(parent: Container, wip: FiberNode) {
  let node = wip.child;
  while (node !== null) {
    if (node?.tag === HostComponent || node?.tag === HostText) {
      appendInitialChild(parent, node?.stateNode);
    } else if (node.child !== null) {
      node.child.return = node;
      // 繼續(xù)向下查找
      node = node.child;
      continue;
    }
    if (node === wip) {
      return;
    }
    while (node.sibling === null) {
      if (node.return === null || node.return === wip) {
        return;
      }
      // 向上找
      node = node?.return;
    }
    node.sibling.return = node.return;
    node = node.sibling;
  }
}

  function workLoop() {
      while (workInProgress !== null) {
          performUnitOfWork(workInProgress);
      }
  }