import { SerializedTextNode, TextNode } from 'lexical';

import { AlignedLyric } from '../types';

type SerializedAlignedLyricNode = SerializedTextNode & {
  type: string;
  text: string;
  alignedLyric: AlignedLyric;
};

export default class AlignedLyricNode extends TextNode {
  alignedLyric: AlignedLyric;

  constructor(alignedLyric: AlignedLyric, key?: string) {
    super(alignedLyric.text, key);
    this.alignedLyric = alignedLyric;
  }

  static getType(): string {
    return 'timedLyrics';
  }

  static clone(node: AlignedLyricNode): AlignedLyricNode {
    return new AlignedLyricNode(node.alignedLyric, node.__key);
  }

  exportJSON(): SerializedAlignedLyricNode {
    return {
      ...super.exportJSON(),
      alignedLyric: this.alignedLyric,
    };
  }

  static importJSON(
    serializedNode: SerializedAlignedLyricNode
  ): AlignedLyricNode {
    return $createAlignedLyricNode(serializedNode.alignedLyric);
  }

  createDOM(): HTMLElement {
    const dom = document.createElement('span');
    dom.className = 'timed-lyric';
    dom.innerText = this.__text;

    if (this.alignedLyric.dirty) {
      dom.classList.add('timed-lyric-dirty');
    }

    if (this.alignedLyric.timing?.type === 'range') {
      dom.classList.add('timed-lyric-range');
      dom.dataset.start = this.alignedLyric.timing.startSeconds.toString();
      dom.dataset.end = this.alignedLyric.timing.endSeconds.toString();
    }
    if (this.alignedLyric.timing?.type === 'point') {
      dom.classList.add('timed-lyric-point');
      dom.dataset.start = this.alignedLyric.timing.seconds.toString();
      dom.dataset.end = this.alignedLyric.timing.seconds.toString();
    }

    return dom;
  }
}

export const $createAlignedLyricNode = (alignedLyric: AlignedLyric) => {
  return new AlignedLyricNode(alignedLyric);
};