import { Component, AfterViewInit, ElementRef, Input } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';

@Component({
  selector: 'rd-typing',
  template: `
    <div class="row">
      <div class="col-md-3">
        <rd-input-text [(rd-model)]="text" (rd-onEnter)="caption = text;typing()"></rd-input-text>      
      </div>
      <div class="col-md-2">
        <rd-button rd-size="small" rd-color="green" rd-icon="fas fa-keyboard" (rd-click)="caption = text;typing()" [rd-disabled]="keyboardDisabled"></rd-button>
        <rd-button rd-size="small" rd-color="yellow" rd-icon="fas fa-eraser" (rd-click)="erasing()" [rd-disabled]="eraserDisabled"></rd-button>
      </div>
    </div>
    <br/>
    <div class="typing" style="border:1px dashed midnightblue;padding:20px" [ngStyle]="style">      
      <span id="caption"></span><span id="cursor">|</span>
    </div>
  `
})
export class Typing extends RdComponent implements AfterViewInit {
  constructor(private element: ElementRef) { super(); }

  @Input("rd-text") text: string = "Type something here!";
  @Input("rd-style") style: object = { 'font-size': "12px" };

  caption: string = '';
  captionEl: any;
  captionLength: number = 0;

  eraserDisabled = false;
  keyboardDisabled = false;

  ngAfterViewInit() {
    setInterval(this.cursorAnimation, 600);
    this.captionEl = this.jQuery(this.element.nativeElement).find('#caption');
  }

  typing() {
    this.captionEl.html(this.caption.substr(0, this.captionLength++));
    if (this.captionLength < this.caption.length + 1) {
      setTimeout(this.typing.bind(this), 50);
      this.eraserDisabled = true;
    } else {
      this.caption = '';
      this.captionLength = 0;
      this.eraserDisabled = false;
    }
  }

  erasing() {
    this.caption = this.captionEl.html();
    this.captionLength = this.caption.length;
    if (this.captionLength > 0) {
      this.erase();
    } else {
      this.jQuery('#caption').html("You didn't write anything to erase, but that's ok!");
      setTimeout(this.erasing.bind(this), 1000);
    }
  }

  erase() {
    this.captionEl.html(this.caption.substr(0, this.captionLength--));
    if (this.captionLength >= 0) {
      setTimeout(this.erase.bind(this), 50);
      this.keyboardDisabled = true;
    } else {
      this.caption = '';
      this.captionLength = 0;
      this.keyboardDisabled = false;
    }
  }

  cursorAnimation() {
    this.jQuery('#cursor').animate({
      opacity: 0
    }, 'fast', 'swing').animate({
      opacity: 1
    }, 'fast', 'swing');
  }
}