import { ElementNode } from 'lexical';

export class CustomParagraph extends ElementNode {
  static getType(): string {
    return 'custom-paragraph'; // 该节点的名称
  }

  // 复制节点的方法
  static clone(node: ParagraphNode): ParagraphNode {
    return new CustomParagraph(node.__key);
  }

  // 该节点所对应的 DOM 结构（节点的视图，抽象数据模型的实现）
  createDOM(): HTMLElement {
    // Define the DOM element here
    // 以 <p> 元素表示
    const dom = document.createElement('p');
    return dom;
  }

  // 更新节点时，是否需要调用 createDOM() 方法重新创建一个新的 DOM 元素来取代页面上原有的旧元素 ❓
  updateDOM(prevNode: CustomParagraph, dom: HTMLElement): boolean {
    // 返回 false 表示不需要使用 createDOM() 方法创建一个新的 DOM 元素
    // 因为段落节点一般只是作为容器元素，一般更新时所变动的内容是其子节点（如文本节点），所以不需要再创建一个新的 DOM 元素
    return false;
  }
}

// 该节点的作用是为文本添加颜色
export class ColoredNode extends TextNode {
  __color: string; // 颜色值

  constructor(text: string, color: string, key?: NodeKey): void {
    super(text, key);
    this.__color = color;
  }

  static getType(): string {
    return 'colored'; // 该节点的名称
  }

  static clone(node: ColoredNode): ColoredNode {
    return new ColoredNode(node.__text, node.__color, node.__key);
  }

  // 该节点所对应的 DOM 结构
  createDOM(config: EditorConfig): HTMLElement {
    const element = super.createDOM(config);
    element.style.color = this.__color;
    return element;
  }

  // 更新节点时
  updateDOM(
    prevNode: ColoredNode,
    dom: HTMLElement,
    config: EditorConfig,
  ): boolean {
    // 更新时是否需要调用 createDOM() 方法重新创建一个新的 DOM 元素来取代页面原有的 DOM 元素
    // 取决于父类（文本节点）的更新行为
    const isUpdated = super.updateDOM(prevNode, dom, config);
    // 如果新节点的颜色与原来节点的颜色不同
    // 则更新 DOM 的样式 color 属性的值
    if (prevNode.__color !== this.__color) {
      dom.style.color = this.__color;
    }
    return isUpdated;
  }
}

export function $createColoredNode(text: string, color: string): ColoredNode {
  return new ColoredNode(text, color);
}

export function $isColoredNode(node: ?LexicalNode): boolean {
  return node instanceof ColoredNode;
}

export class VideoNode extends DecoratorNode<ReactNode> {
  __id: string; // 该节点具有一个 id 属性，作为唯一标记符

  static getType(): string {
    return 'video'; // 该节点的名称
  }

  static clone(node: VideoNode): VideoNode {
    return new VideoNode(node.__id, node.__key);
  }

  constructor(id: string, key?: NodeKey) {
    super(key);
    this.__id = id;
  }

  // 该节点所对应的 DOM 结构
  createDOM(): HTMLElement {
    return document.createElement('div');
  }

  // 更新该节点时并不需要重新调用 createDOM() 方法重新创建一个新的 DOM 元素
  updateDOM(): false {
    return false;
  }

  // 装饰内容是一个 React 组件
  decorate(): ReactNode {
    return <VideoPlayer videoID={this.__id} />;
  }
}

export function $createVideoNode(id: string): VideoNode {
  return new VideoNode(id);
}

export function $isVideoNode(node: ?LexicalNode): boolean {
  return node instanceof VideoNode;
}