import { Component, EventEmitter, Input, Output } from '@angular/core';
import { TypeSafeFormGroup } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { ReferenceFieldsService } from '../services/reference-fields.service';
export interface CategoryGroup {
  categoryId: number;
}

@Component({
  selector: 'gc-category-selector',
  templateUrl: './category-selector.component.html',
  styleUrls: ['./category-selector.component.scss']
})
export class CategorySelectorComponent {
  @Input() formGroup: TypeSafeFormGroup<CategoryGroup>;
  @Input() categoryLabel = this.i18n.translate(
    'GLOBAL:textCategory',
    {},
    'Category'
  );
  @Input() isViewOnly = false;
  @Output() onAddingCatgoryChange = new EventEmitter<boolean>();

  categoryOptions = this.referenceFieldService.categoryOptions;
  addingCategory = false;

  constructor (
    private referenceFieldService: ReferenceFieldsService,
    private i18n: I18nService
  ) { }

  onAddCategory () {
    this.addingCategory = true;
    this.clearCategory();
    this.onAddingCatgoryChange.emit(this.addingCategory);
  }

  onClearAddCategory () {
    this.addingCategory = false;
    this.clearCategory();
    this.onAddingCatgoryChange.emit(this.addingCategory);
  }

  clearCategory () {
    this.formGroup.get('categoryId').setValue(null);
  }
}