import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewChildren} 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>();
  @Output() saveHostRequested = new EventEmitter<HostComponent>();
  @ViewChild('hostContainer', {static: false}) hostContainer: ElementRef;
  @ViewChildren('liItems') liItems;

  public listLines: Array<string> = [];

  constructor() { }

  ngOnInit() {}

  onRecordChange($event) {
    this.recordChange.emit($event);
  }

  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 if ( innerText.startsWith('http') ) {
      this.record.type = 'click_link';
    } else if ( false && innerText.startsWith('-') || innerText.startsWith(' -') ) {
      // this.record.type = 'ul';
      this.listLines = [this.record.value];
      setTimeout(() => {
        const item = this.liItems.toArray()[0].nativeElement;
        const s = window.getSelection();
        const r = document.createRange();
        r.setStart(item, 0);
        r.setEnd(item, 0);
        s.removeAllRanges();
        s.addRange(r);
      }, 0);
    }
  }

  onRequestDelete($event) {
    this.destroyHostRequested.emit(this);
  }

  onLIKeyUp($event, i) {
    if ( $event.code === 'Enter' ) {
      /*const newListLines = [];
      this.liItems.forEach((li, index) => {
        newListLines.push(li.nativeElement.innerText.trim());
        if ( index === i ) {
          newListLines.push('');
        }
      });

      this.listLines = newListLines;*/
      // this.listLines[i] = this.liItems[i].innerText.trim()
      // const newLines = []
      // this.listLines.forEach((rec, x) => {
      //   newLines.push(rec.trim());
      //   if ( i === x ) {
      //     newLines.push('');
      //   }
      // })


      // this.listLines = newLines;

      // setTimeout(() => {
      //   const item = this.liItems.toArray()[i + 1].nativeElement;
      //   const s = window.getSelection();
      //   const r = document.createRange();
      //   r.setStart(item, 0);
      //   r.setEnd(item, 0);
      //   s.removeAllRanges();
      //   s.addRange(r);
      // }, 10);
    }
  }

  onRequestParentSave($event) {
    this.saveHostRequested.emit(this);
  }

  onHostDblClick() {
    if ( this.record.type === 'click_link' ) {
      window.open(this.record.value.trim(), '_blank');
    }
  }

}