import { NgFor, NgIf } from '@angular/common';
import { Component, EventEmitter, Input, Output, SimpleChanges, OnChanges } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TranslatePipe } from '@ngx-translate/core';
import { StringHelper } from '../helpers/string.helper';

import { getEventSelectValue } from '@app/shared/util';

@Component({
  selector: 'app-items-per-page',
  templateUrl: './items-per-page.component.html',
  styleUrls: ['./items-per-page.component.scss'],
  standalone: true,
  imports: [NgIf, FormsModule, NgFor, TranslatePipe],
})
export class ItemsPerPageComponent implements OnChanges {
  /**
   * List of options to choose from
   */
  @Input() options = [5, 10, 20, 50];

  /**
   * Selected option
   */
  @Input() selected: number;

  /**
   * Emits selected item
   */
  @Output() selectedChange = new EventEmitter();

  /**
   * Determines whether number exists in array of options
   */
  isNumberValid: boolean;

  /**
   * Unique id
   */
  uniqueId = StringHelper.generateRandomHex();

  protected readonly getSelectValue = getEventSelectValue;
  protected readonly Number = Number;

  /**
   * Emits value on change
   * @param {number} value
   */
  onChange(value: number) {
    this.selectedChange.emit(value);
  }

  /**
   * Determines whether provided sort value exists on the list of sort options.
   * Filters out counters with '0' value
   * @param {SimpleChanges} changes
   */
  ngOnChanges(changes: SimpleChanges) {
    this.selected = Number(this.selected);
    if (changes.selected) {
      this.isNumberValid = !!this.options.find((option) => option === Number(changes.selected.currentValue));
    }
  }
}
