import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import HostRecord from '../../../structures/HostRecord';

@Component({
  selector: 'editor-host',
  templateUrl: './host.component.html',
  styleUrls: ['./host.component.scss'],
})
export class HostComponent implements OnInit {
  @Input() record: HostRecord;
  @Output() recordChange = new EventEmitter<HostRecord>();
  @Output() newHostRequested = new EventEmitter<HostComponent>();
  @Output() destroyHostRequested = new EventEmitter<HostComponent>();
  @ViewChild('hostContainer', {static: false}) hostContainer: ElementRef;

  constructor() { }

  ngOnInit() {}

  onKeyUp($event) {
    const innerText = this.hostContainer.nativeElement.innerText.trim()
    if ( $event.code === 'Enter'
        && ( this.record.type !== 'block_code'
        || (innerText.endsWith('```') && (innerText.match(/`/g) || []).length >= 6)
        )
    ) {
      this.newHostRequested.emit(this);
      this.hostContainer.nativeElement.innerText = this.hostContainer.nativeElement.innerText.trim();
    } else if ( $event.code === 'Backspace' && !this.hostContainer.nativeElement.innerText.trim() ) {
      this.destroyHostRequested.emit(this);
    }

    if ( innerText.startsWith('# ') ) {
      this.record.type = 'header1';
    } else if ( innerText.startsWith('## ') ) {
      this.record.type = 'header2';
    } else if ( innerText.startsWith('### ') ) {
      this.record.type = 'header3';
    } else if ( innerText.startsWith('#### ') ) {
      this.record.type = 'header4';
    } else if ( innerText.startsWith('```') ) {
      this.record.type = 'block_code';
    } else {
      this.record.type = 'paragraph';
    }
  }

}