import { Component, ElementRef, Input, ViewChild } from '@angular/core'
import JSONFormatter from 'json-formatter-js'

@Component({
  selector: 'app-docs-json',
  template: `
    <pre [style.display]="'none'">{{ model }}</pre>
    <pre #modelPreview></pre>
  `,
})
export class DocsJsonComponent {

  private _prevModel: any

  private _model: any

  @Input() public set model(model) {
    this._model = model
  }

  public get model() {
    const model = JSON.stringify(this._model)
    if (this._prevModel !== model && this.modelPreviewRef && this.modelPreviewRef.nativeElement) {
      this._prevModel = model
      const formatter = new JSONFormatter(this._model, 5, { hoverPreviewEnabled: true })
      this.modelPreviewRef.nativeElement.innerHTML = ''
      this.modelPreviewRef.nativeElement.appendChild(formatter.render())
    }
    return this._model
  }

  @ViewChild('modelPreview') modelPreviewRef: ElementRef
}