import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
import { MessageService } from 'primeng/components/common/messageservice';

@Component({
  selector: 'of-probe-detail',
  templateUrl: './detail.component.html',
  providers: [MessageService]
})
export class ProbeDetailComponent {

  @Input() probeHost: ProbeHost;
  @Output() modify = new EventEmitter<ProbeHost>();
  @Output() discovery = new EventEmitter<number>();

  editMode = false;

  constructor(private messageService: MessageService) {
  }

  onEditSave() {
    const displayNameValidation = this.checkValidDisplayName();
    if (displayNameValidation) {
      alert(displayNameValidation);
      return;
    }

    const descriptionValidation = this.checkValidDescription();
    if (descriptionValidation) {
      alert(descriptionValidation);
      return;
    }

    this.modify.emit(this.probeHost);
    this.editMode = false;
  }

  onDiscoveryClick() {
    this.discovery.emit(this.probeHost.id);
  }

  checkValidDisplayName(): string {
    const displayName = this.probeHost.probe.displayName;
    if (displayName.length <= 2 || displayName.length > 20) {
      return 'displayname length : 3 ~ 20';
    }
    const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
    if (displayName.match(regex)) {
      return 'Cannot use special characters.';
    }
    return null;
  }

  checkValidDescription(): string {
    const description = this.probeHost.probe.description;
    if (description.length > 50) {
      return 'description length : 0 ~ 50';
    }
    const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
    if (description.match(regex)) {
      return 'Cannot use special characters.';
    }
    return null;
  }
}