import {
  AfterViewChecked,
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output
} from '@angular/core';
import { CrdsContentBlockService } from './crds-content-block.service';

@Component({
  selector: 'crds-content-block',
  template: `
    <span [innerHtml]="output | safeHtml"></span>
  `,
  styles: []
})
export class CrdsContentBlockComponent implements OnInit, AfterViewChecked {
  public output: string;
  private callbackProcessed = false;
  @Input() id: string;
  @Output() contentLoaded = new EventEmitter();

  constructor(private content: CrdsContentBlockService) {}

  ngOnInit() {
    this.getContent(this.id);
  }

  ngAfterViewChecked() {
    if (this.output && !this.callbackProcessed) {
      this.contentLoaded.emit(this.output);
      this.callbackProcessed = true;
    }
  }

  getContent(title) {
    return this.content.getContent(title).subscribe(contentBlock => {
      this.output = contentBlock ? contentBlock.content : '';
      if (!this.output) {
        console.error('[ERROR] Could not find content block: ' + title);
      }
    });
  }
}