export class D3SVGElement {
  protected attributes: { [key: string]: string } = {};

  protected children: D3SVGElement[] = [];

  protected innerText: string | null = null;

  protected styles: { [key: string]: string } = {};

  constructor(public tag: string) {}

  public static create(tag: string): D3SVGElement {
    const element: D3SVGElement = new D3SVGElement(tag);

    if (tag === 'svg') {
      element.attr('xmlns', 'http://www.w3.org/2000/svg');
    }

    return element;
  }

  public append(tag: string): D3SVGElement {
    const element: D3SVGElement = D3SVGElement.create(tag);

    this.children.push(element);

    return element;
  }

  public attr(name: string, value: string): D3SVGElement {
    this.attributes[name] = value;

    return this;
  }

  public style(name: string, value: string): D3SVGElement {
    this.styles[name] = value;

    return this;
  }

  public text(value: string): D3SVGElement {
    this.innerText = value;

    return this;
  }

  public toString(): string {
    return `<${
      this.tag
    }${this.attributesToString()}${this.stylesToString()}>${this.innerTextToString()}${this.childrenToString()}</${
      this.tag
    }>`;
  }

  private attributesToString(): string | null {
    if (!this.attributes) {
      return null;
    }

    return this.attributes
      ? ` ${Object.keys(this.attributes)
          .map((key) => `${key}="${this.attributes[key]}"`)
          .join(' ')}`
      : '';
  }

  private childrenToString(): string {
    return this.children.map((element) => element.toString()).join('');
  }

  private innerTextToString(): string {
    return this.innerText ? this.innerText : '';
  }

  private stylesToString(): string {
    return this.styles
      ? ` style="${Object.keys(this.styles)
          .map((key) => `${key}: ${this.styles[key]}`)
          .join(';')}"`
      : '';
  }
}