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

@Component({
  selector: 'app-picture-tag-input',
  templateUrl: './picture-tag-input.component.html',
  styleUrls: ['./picture-tag-input.component.less']
})
export class PictureTagInputComponent implements OnInit {

  // tags
  @Input() tagString = '';
  tags: string[] = [];

  // changed
  @Output() changeEvent = new EventEmitter();

  inputVisible = false;
  inputTagValue = '';
  @ViewChild('inputElement', { static: false }) inputElement?: ElementRef;

  constructor() { }

  handleTagClose(removedTag: {}) {
    this.tags = this.tags.filter(tag => tag !== removedTag);
    this.changeEvent.emit(this.tags.join('#'));
    return false;
  }

  sliceTagName(tag: string): string {
    const isLongTag = tag.length > 20;
    return isLongTag ? `${tag.slice(0, 20)}...` : tag;
  }

  showTagInput(): void {
    this.inputVisible = true;
    setTimeout(() => {
      this.inputElement?.nativeElement.focus();
    }, 10);
  }

  handleTagConfirm(evName: string) {
    const value = this.inputTagValue.trim();
    if (value && this.tags.indexOf(value) === -1) {
      this.tags = [...this.tags, value];
    }
    this.inputTagValue = '';
    this.inputVisible = false;
    if (evName === 'enter') {
      this.showTagInput();
    }
    this.changeEvent.emit(this.tags.join('#'));
    return false;
  }

  ngOnInit(): void {
    if (this.tagString) {
      this.tags = this.tagString.split('#');
    }
  }

}