import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-shelf-order-details-shelf-tags',
  templateUrl: 'shelftags.component.html',
  styleUrls: ['shelftags.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  exportAs: 'shelfDetailsTag',
})
export class ShelfOrderDetailsShelfTagsComponent implements OnInit, OnDestroy {
  @Input()
  selected: string;

  @Output()
  selectedChange = new EventEmitter<string>();

  @Input()
  tags = ['Maxi', 'Mini', 'Kleinkram', 'Nonbook'];

  customValue = new FormControl('', [Validators.required, Validators.maxLength(15)]);

  subscription = new Subscription();

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.subscription.add(
      this.customValue.valueChanges.subscribe((value) => {
        this.selected = value;
        this.selectedChange.next(value);
      })
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  checkInput() {
    if (this.customValue && this.customValue.value && this.customValue.value.length > 0) {
    } else {
      this.selected = undefined;
      this.selectedChange.emit(undefined);
    }
  }
}
