
import { ChangeDetectionStrategy, Component, computed, model } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { UiCommonModule } from '@ui/common';
import { MatomoModule } from 'ngx-matomo-client';

@Component({
  selector: 'page-pickup-shelf-details-tags',
  templateUrl: 'pickup-shelf-details-tags.component.html',
  styleUrls: ['pickup-shelf-details-tags.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'page-pickup-shelf-details-tags' },
  imports: [UiCommonModule, FormsModule, MatomoModule],
})
export class PickUpShelfDetailsTagsComponent {
  $selected = model<string>(undefined, { alias: 'selected' });
  $inputValue = model<string>(undefined, { alias: 'inputValue' });

  readonly defaultTags = ['Maxi', 'Mini', 'Kleinkram', 'Nonbook', 'Kalender'];

  $controlSize = computed(() => {
    const value = this.$inputValue();
    if (value) {
      return Math.min(value.length, 15);
    }
    return 3;
  });

  setCompartmentInfo(compartmentInfo: string) {
    const currentCompartmentInfo = this.$selected();
    if (currentCompartmentInfo === compartmentInfo) {
      this.$selected.set(undefined);
    } else {
      this.$selected.set(compartmentInfo);
    }
  }
}
