import { jsxDEV } from './src/jsx'
export default {
  version: '0.0.0',
  createElement: jsxDEV
}

export type Type = any
export type Props = any
export type Key = any
export type Ref = any
export type ElementType = any
export interface ReactElementType {
  $$typeof: symbol | number
  type: ElementType
  key: Key | null
  ref: Ref | null
  props: Props
  __mark: string
}

const supporSymbol = typeof Symbol === 'function' && Symbol.for

export const REACT_ELEMENT_TYPE = supporSymbol
  ? Symbol.for('react.element')
  : 0xeac7

import type { Props, Key, Ref } from 'shared/ReactTypes'
import { WorkTag } from './workTags'
import { Flags, NoFlags } from './fiberFlags'
export class FiberNode {
  // 元素类型
  type: any
  // 代表fiber的类型
  tag: WorkTag
  // 代表fiber属性
  pendingProps: Props
  key: Key
  // 表示fiber对应的真实DOM节点
  stateNode: any
  // 指向父fiberNode
  return: FiberNode | null
  // 指向兄弟fiberNode
  sibling: FiberNode | null
  // 指向子fiberNode
  child: FiberNode | null
  // 表示当前fiber在父fiber中的位置
  index: number
  ref: Ref
  // 表示fiber的属性
  memoizedProps: Props | null
  // 表示fiber的上一次渲染的fiber
  alternate: FiberNode | null
  // 表示fiber的状态
  flags: Flags
  constructor(tag: WorkTag, pendingProps: Props, key: Key) {
    // 实例属性
    this.tag = tag
    this.key = key
    // HostComponent <div> div DOM
    this.stateNode = null
    // FunctionComponent ()=>{}
    this.type = null
    // 构成树形结构
    this.return = null
    this.sibling = null
    this.child = null
    this.index = null
    this.ref = null
    // 作为工作单元
    this.pendingProps = pendingProps
    this.memoizedProps = null
    // 缓冲树
    this.alternate = null
    this.flags = NoFlags
  }
}

export type Flags = number
export const NoFlags = 0b0000001
export const Placement = 0b0000010
export const Update = 0b0000100
export const ChildDeletion = 0b0001000

export type WorkTag =
  | typeof FunctionComponent
  | typeof HostRoot
  | typeof HostComponent
  | typeof HostText
export const FunctionComponent = 0
export const HostRoot = 3
export const HostComponent = 5
export const HostText = 6

// 递归中的递阶段
import { FiberNode } from './fiber'
export const beginWork = (fiber: FiberNode) => {
  console.log('beginWork', fiber)
}

import { FiberNode } from './fiber'
export const completeWork = (fiber: FiberNode) => {
  console.log('completeWork', fiber)
}

import { FiberNode } from './fiber'
import { completeWork } from './completeWork'
import { beginWork } from './beginWork'

let workInProgress: FiberNode | null = null
/**
 * @param {FiberNode} fiber
 * @description 初始化
 * @returns {void}
 * @example
 * @author yueyun
 * */
function prepareFreshStatck(fiber: FiberNode) {
  workInProgress = fiber
}

/**
 * @param root {FiberNode} 根节点
 * @description 渲染根节点
 * @returns {void}
 * @example
 * renderRoot(root)
 * @author yueyun
 */
function renderRoot(root: FiberNode) {
  prepareFreshStatck(root)
  do {
    try {
      workLoop()
      break
    } catch (err) {
      console.warn('workLoop发生错误', err)
      workInProgress = null
    }
  } while (true)
}

/**
 * @param {void}
 * @description 通过workInProgress遍历fiber树 处理当前的工作单元
 * @returns {void}
 * */
function workLoop() {
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress)
  }
}

/**
 * @param {FiberNode} fiber 当前的工作单元
 * @description 处理当前的工作单元
 * @returns {void}
 * @author yueyun
 */
function performUnitOfWork(fiber: FiberNode) {
  const next = beginWork(fiber)
  //状态更新和渲染 memoizedProps该 Fiber 节点上次渲染时使用的 props。它是“记忆化”的 props，用于比较和避免不必要的重渲染。
  //pendingProps 这个属性存储了即将用于渲染的新 props。当组件接收到新的 props 时，这些新的 props 首先被设置到 pendingProps 上。
  fiber.memoizedProps = fiber.pendingProps
  if (next == null) {
    //递归向上回溯 直到遍历完整个 Fiber 树或者达到树的顶端
    completeUnitOfWork(fiber)
  } else {
    workInProgress = next
  }
}

/**
 * @param {FiberNode} fiber 当前的工作单元
 * @description 递归向上回溯 直到遍历完整个 Fiber 树或者达到树的顶端
 * @returns {void}
 * @author yueyun
 * */
function completeUnitOfWork(fiber: FiberNode) {
  let node: FiberNode | null = fiber
  do {
    //
    completeWork(node)
    const sibling = node.sibling
    if (sibling !== null) {
      workInProgress = sibling
      return
    }
    node = node.return
    workInProgress = node
  } while (node !== null)
}

export type Action<State> = State | ((prevState: State) => State)

import { Action } from 'shared/ReactTypes'

/**
 *Update数据结构
 * @param action function | any
 * @returns {Update}
 * @description 用于更新状态的数据结构接口
 * */
export interface Update<State> {
  action: Action<State>
}

/**
 * UpdateQueue数据结构
 * @param shared { pending: Update<State> | null }
 * @returns {UpdateQueue}
 * @description 用于存储待处理的更新
 */
export interface UpdateQueue<State> {
  shared: {
    pending: Update<State> | null
  }
}

/**
 *@param Action<State> function | any
 *@returns {Update<State>}
 *@description 泛型函数接受一个Action<State>类型的参数，返回一个Update<State>类型的对象用于创建一个新的更新
 */
export const createUpdate = <State>(action: Action<State>): Update<State> => {
  return {
    action
  }
}

/**
 *@returns {UpdateQueue<Action>}
 *@description 创建一个新的更新队列 被初始化为一个为null
 */
export const createUpdateQueue = <Action>() => {
  return {
    shared: {
      pending: null
    }
  } as UpdateQueue<Action>
}

/**
 *@param updateQueue UpdateQueue<Action>
 *@param update Update<Action>
 *@returns {void}
 *@description 将更新添加到更新队列中
 */
export const enqueueUpdate = <Action>(
  updateQueue: UpdateQueue<Action>,
  update: Update<Action>
) => {
  updateQueue.shared.pending = update
}

/**
 * @param baseState State 基础状态
 * @param pendingUpdate Update<State> | null 待处理的更新
 * @returns {State} memoizedState
 * @description 泛型函数处理更新队列 接受一个基础状态和可能的更新 返回更新后的状态
 */
export const processUpdateQueue = <State>(
  baseState: State,
  pendingUpdate: Update<State> | null
): { memoizedState: State } => {
  const result: ReturnType<typeof processUpdateQueue<State>> = {
    memorizedState: baseState
  }
  if (pendingUpdate !== null) {
    const action = pendingUpdate.action
    if (action instanceof Function) {
      result.memoizedState = action(baseState)
    } else {
      result.memoizedState = action
    }
  }
  return result
}

import type { Container } from 'hostConfig'
/**
 * @param {Container} container 宿主容器
 * @param {FiberNode} hostRootFiber 根节点
 * @description FiberRootNode数据结构
 * 包含的数据
 * @argument container: 宿主容器
 * @argument current: 当前的工作单元
 * @argument finishiedWork: 已经完成的工作单元
 * @returns {FiberRootNode}
 */
export class FiberRootNode {
  container: Container
  current: FiberNode
  finishiedWork: FiberNode | null
  constructor(container: Container, hostRootFiber: FiberNode) {
    this.current = hostRootFiber
    this.container = container
    hostRootFiber.stateNode = this
    this.finishiedWork = null
  }
}

import { HostRoot } from './workTags'
import { Container } from 'hostConfig'
import { FiberNode, FiberRootNode } from './fiber'
import {
  UpdateQueue,
  createUpdate,
  createUpdateQueue,
  enqueueUpdate
} from './updateQueue'
import { ReactElementType } from 'shared/ReactTypes'
import { scheduleUpdateOnFiber } from './workLoop'
/**
 * @param {Container} container 容器
 * @description 创建容器
 * @returns {FiberRootNode}
 */
export function createContainer(container: Container) {
  const hostRoot = new FiberNode(HostRoot, null, null)
  const root = new FiberRootNode(container, hostRoot)
  hostRoot.updateQueue = createUpdateQueue
  return root
}

/**
 * @param {ReactElementType | null} element 用于更新的React元素
 * @param {FiberRootNode} root FiberRootNode 根节点
 * @description 使用新的react元素更新容器
 * @returns {ReactElementType | null} 返回更新后的React元素
 * */
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
  )
  // 调度更新
  scheduleUpdateOnFiber(hostRootFiber)
  return element
}

import { createWorkInProgress } from './fiber'
function prepareFreshStack(root: FiberRootNode) {
  workInProgress = createWorkInProgress(root.current, {})
}

/**
 * @param {FiberNode} fiber
 * @description 调度更新
 */
export function scheduleUpdateOnFiber(fiber: FiberNode) {
  // Todo 调度功能
  console.log('scheduleUpdateOnFiber', fiber)
  const root = makeUpdateFromFiberToRoot(fiber)
  renderRoot(root)
}

/**
 * @param {FiberNode} fiber
 * @description 从Fiber节点到根节点
 * @returns {FiberRootNode | null} 返回根节点
 */
export function makeUpdateFromFiberToRoot(fiber: FiberNode) {
  console.log('makeUpdateFromFiberToRoot', fiber)
  let node = fiber
  let parent = fiber.return
  if (parent !== null) {
    node = parent
    parent = node.return
  }
  if (node.tag === HostRoot) {
    return node.stateNode
  }
  return null
}

/**
 * @param {FiberNode} current 当前的工作单元
 * @param {Props} pendingProps 表示fiber的属性
 * @description 创建一个新的工作单元
 * @returns {FiberNode}
 * wip: work in progress 工作单元 用于更新的数据结构 wip是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.type = current.type
        wip.stateNode = current.stateNode
        wip.alternate = current
        current.alternate = wip
    } esle {
        // update
        wip.pendingProps = pendingProps
        wip.flags = NoFlags
        wip.updateQueue = current.updateQueue
        wip.child = current.child
        wip.memoizedProps = current.memoizedProps
        wip.memoizedState = current.memoizedState
    }
    return wip
}