import { Component, OnInit, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
import { isNullOrUndefined } from 'util';

@Component({
  selector: 'lib-tag',
  templateUrl: './tag.component.html',
  styleUrls: ['./tag.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TagComponent implements OnInit {
  @Input() selected = false;
  @Input() mode;
  @Input() label;
  @Output() changed = new EventEmitter<{ label: string; selected: boolean }>();
  constructor() {}

  ngOnInit() {}

  clickTag(event: any) {
    const breakingCondition = event.target.id === 'input' || (this.mode === 'input' && !this.label);
    if (breakingCondition) {
      return;
    }
    this.selected = !this.selected;
    this.changed.emit({ label: this.label, selected: this.selected });
  }

  inputUpdated(event: any) {
    if (isNullOrUndefined(event.target.value) || event.target.value === '') {
      this.selected = false;
    }
    this.changed.emit({ label: this.label, selected: this.selected });
  }
}
