// 변경 전
export function NodeView({
// 변경 후
export const NodeView = memo(function NodeView({
  outerDeco,
  pos,
  node,
  innerDeco,
  ...props
}: NodeViewProps) {

function getPos(): number;

export function ChildNodeViews({
  pos,
  node,
  innerDecorations,
}: {
  pos: number;
  node: Node | undefined;
  innerDecorations: DecorationSource;
}) {
  // 이 노드의 첫 번째 자식의 시작 위치입니다.
  const innerPos = pos + 1;
  if (!node) return null;
  const children: ReactNode[] = [];
  
  // 노드의 자식들을 순회하며 각 자식의 데코레이션과
  // 부모에 대한 상대적 위치를 추적하는 편의 메서드입니다.
  iterateChildren(
    node,
    innerDecorations,
    (child, outerDeco, innerDeco, offset) => {
      children.push(
        <NodeView
          node={child}
          outerDeco={outerDeco}
          innerDecorations={innerDeco}
          pos={innerPos + offset}
        />,
      );
    },
  );
  return <>{children}</>;
}

export function ChildNodeViews({
  getPos,
  node,
  innerDecorations,
}: {
  getPos: () => number;
  node: Node | undefined;
  innerDecorations: DecorationSource;
}) {
  // 이 노드의 첫 번째 자식의 시작 위치를 가져오는 함수입니다.
  const getInnerPos = () => getPos() + 1;
  if (!node) return null;
  const children: ReactNode[] = [];

  iterateChildren(
    node,
    innerDecorations,
    (child, outerDeco, innerDeco, offset) => {
      children.push(
        <NodeView
          node={child}
          outerDeco={outerDeco}
          innerDecorations={innerDeco}
          getPos={() => getInnerPos() + offset}
        />,
      );
    },
  );
  return <>{children}</>;
}

export function ChildNodeViews({
  getPos,
  node,
  innerDecorations,
}: {
  getPos: MutableRefObject<() => number>;
  node: Node | undefined;
  innerDecorations: DecorationSource;
}) {
  if (!node) return null;
  // 이 노드의 첫 번째 자식의 시작 위치를 가져오는 Ref입니다.
  const getInnerPos = useRef(() => getPos.current() + 1);
  const children: ReactNode[] = [];

  iterateChildren(
    node,
    innerDecorations,
    (child, outerDeco, innerDeco, offset) => {
      children.push(
        <ChildElement
          node={child}
          outerDeco={outerDeco}
          innerDecorations={innerDeco}
          getInnerPos={getInnerPos}
          offset={offset}
        />,
      );
    },
  );
  return <>{children}</>;
}

function ChildElement({
  node,
  outerDeco,
  innerDecorations,
  offset,
  getInnerPos,
}: {
  node: Node;
  outerDeco: Decoration[];
  innerDecorations: DecorationSource;
  offset: number;
  getInnerPos: () => number;
}) {
  const getPos = useCallback(() => {
    return getInnerPos() + offset;
  }, [getInnerPos, offset]);

  return (
    <NodeView
      node={node}
      outerDeco={outerDeco}
      innerDeco={innerDecorations}
      getPos={getPos}
    />
  );
}

function BadRefUpdateDemo({ value }: { value: number }) {
  const valueRef = useRef(value);
  // prop과 동기화하기 위해 렌더링 중에 Ref 값을 업데이트합니다.
  valueRef.current = value;

  const onClick = useCallback(() => {
    saveValue(valueRef.current);
  }, []);

  return <button onClick={onClick}>Save ({value})</button>;
}

/**
 * 트랜잭션 전반에 걸쳐 노드 키를 안정적으로 유지합니다.
 * 
 * 이를 위해 각 노드 위치를 트랜잭션을 통해 정방향 매핑하여
 * 현재 위치를 식별하고, 해당 새 위치에 키를 할당합니다.
 * 노드가 삭제된 경우 키를 삭제합니다.
 */
apply(tr, value, _, newState) {
  if (!tr.docChanged || composing) {
    return value;
  }
  const next = {
    posToKey: new Map<number, string>(),
    keyToPos: new Map<string, number>(),
  };
  const posToKeyEntries = Array.from(value.posToKey.entries()).sort(
    ([a], [b]) => a - b
  );
  for (const [pos, key] of posToKeyEntries) {
    const { pos: newPos, deleted } = tr.mapping.mapResult(pos)
    if (deleted) continue;
    next.posToKey.set(newPos, key);
    next.keyToPos.set(key, newPos);
  }
  newState.doc.descendants((_, pos) => {
    if (next.posToKey.has(pos)) return true;
    const key = createNodeKey();
    next.posToKey.set(pos, key);
    next.keyToPos.set(key, pos);
    return true;
  });
  return next;
},

export function ChildNodeViews({
  getPos,
  node,
  innerDecorations,
}: {
  getPos: MutableRefObject<() => number>;
  node: Node | undefined;
  innerDecorations: DecorationSource;
}) {
  const reactKeys = useReactKeys();
  const getInnerPos = useCallback(() => getPos() + 1, [getPos]);
  const childMap = useRef(new Map<string, Child>()).current;
  if (!node) return null;
  const keysSeen = new Map<string, number>();

  iterateChildren(
    node,
    innerDecorations,
    (child, outerDeco, innerDeco, offset) => {
      const key = reactKeys.posToKey.get(getInnerPos() + offset);
      const childData = {
        node: child,
        offset,
        key,
        innerDeco,
        outerDeco,
      };
      // 지난 렌더링에서의 이 자식 정보(키 기준)입니다.
      const prevChild = childMap.get(key);
      
      // 이 자식이 (위치 외에) 변경되지 않았다면,
      // 이전 자식 객체의 위치를 업데이트하고 재사용합니다.
      // 이는 ChildElement의 불필요한 재렌더링을 방지하면서
      // getPos 구현을 최신 상태로 유지합니다.
      if (prevChild && areChildrenEqual(prevChild, childData)) {
        prevChild.offset = offset;
      } else {
        childMap.set(key, childData);
      }
      keysSeen.set(key, keysSeen.size);
    },
  );

  for (const key of childMap.keys()) {
    if (!keysSeen.has(key)) {
      childMap.delete(key);
    }
  }

  const children = Array.from(childMap.values())
    .sort((a, b) => keysSeen.get(a.key)! - keysSeen.get(b.key)!)
    .map((child) => (
      <ChildElement key={child.key} child={child} getInnerPos={getInnerPos} />
    ));

  return <>{children}</>;
}

/**
 * prosemirror-view가 커스텀 노드 뷰의 update 메서드 호출 여부를
 * 결정할 때 사용하는 것과 동일한 로직입니다.
 */
function areChildrenEqual(a: Child, b: Child) {
  return (
    a.key === b.key &&
    a.node.eq(b.node) &&
    sameOuterDeco(a.outerDeco, b.outerDeco) &&
    (a.innerDeco as InternalDecorationSource).eq(b.innerDeco)
  );
}

function ChildElement({
  child,
  getInnerPos,
}: {
  child: Child;
  getInnerPos: () => number;
}) {
  // 우리는 사실상 `child`를 Ref처럼 사용하고 있습니다.
  // 노드와 데코레이션이 변경되지 않는 한 안정적인 참조를 유지하지만,
  // offset은 최신 상태로 유지됩니다.
  const getPos = useCallback(() => {
    return getInnerPos() + child.offset;
  }, [getInnerPos, child]);

  return (
    <NodeView
      node={child.node}
      outerDeco={child.outerDeco}
      innerDeco={child.innerDeco}
      getPos={getPos}
    />
  );
}