/* tslint:disable component-selector */

import { Component, OnInit, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

// TODO(i): add clipboard copy functionality

/**
 * Angular.io Code Example
 *
 * Pretty renders a code block, primarily used in the docs and API reference. Can be used within an Angular app, or
 * independently, provided that it is dynamically generated by the component resolver.
 *
 * Usage:
 *   <code-example [language]="..." [escape]="..." [format]="..." [showcase]="..." [animated]="...">
 *     console.log('Hello World')
 *   </code-example>
 */
@Component({
  selector: 'code-example',
  template: '<pre class="{{classes}}"><code class="{{animatedClasses}}" #codeContainer></code></pre>'
})
export class CodeExampleComponent implements OnInit, AfterViewInit {

  @ViewChild('codeContainer') codeContainerRef: ElementRef;

  language: string; // could be javascript, dart, typescript
  // TODO(i): escape doesn't seem to be currently supported in the original code
  escape: string; // could be 'html'
  format: string; // some css class
  showcase: string; // a string with the value 'true'
  animated = false;

  // TODO(i): could we use @HostBinding instead or does the CSS have to be scoped to <pre> and <code>
  classes: string;
  animatedClasses: string;


  constructor(private elementRef: ElementRef) {
    // TODO(i): @Input should be supported for host elements and should just do a one off initialization of properties
    //          from the host element => talk to Tobias
    ['language', 'escape', 'format', 'showcase', 'animated'].forEach(inputName => {
      if (!this[inputName]) {
        this[inputName] = this.elementRef.nativeElement.getAttribute(inputName);
      }
    });
  }


  ngOnInit() {
    const showcaseClass = this.showcase === 'true' ? ' is-showcase' : '';
    this.classes = `
      prettyprint
      ${this.format ? this.format : ''}
      ${this.language ? 'lang-' + this.language : '' }
      ${showcaseClass ? showcaseClass : ''}
    `.trim();

    this.animatedClasses = `${this.animated ? 'animated fadeIn' : ''}`;

    // Security: the codeExampleContent is the original innerHTML of the host element provided by
    //           docs authors and as such its considered to be safe for innerHTML purposes
    this.codeContainerRef.nativeElement.innerHTML = this.elementRef.nativeElement.codeExampleContent;
  }


  ngAfterViewInit() {
    // TODO(i): import prettify.js from this file so that we don't need to preload it via index.html
    // whenever a code example is used, use syntax highlighting.
    // if(prettyPrint) {
    //   prettyPrint();
    // }
  }
}