import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { SpinnerService } from '@core/services/spinner.service';
import { ReferenceFieldAPI } from '@core/typings/api/reference-fields.typing';
import { TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';
import { uniq } from 'lodash';
import { CategoryGroup } from '../category-selector/category-selector.component';
import { ReferenceFieldsService } from '../services/reference-fields.service';

@Component({
  selector: 'gc-manage-category-modal',
  templateUrl: './manage-category-modal.component.html',
  styleUrls: ['./manage-category-modal.component.scss']
})
export class ManageCategoryModalComponent extends YCModalComponent<number> implements OnInit {
  @Input() fields: ReferenceFieldAPI.ReferenceFieldDisplayModel[];

  addingCategory = false;
  saving = false;
  formGroup: TypeSafeFormGroup<CategoryGroup>;

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private spinnerService: SpinnerService,
    private referenceFieldService: ReferenceFieldsService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    const categories = uniq(
      this.fields.map((field) => field.categoryId).filter((item) => !!item)
    );
    let categoryId = null;
    if (categories.length === 1) {
      categoryId = categories[0];
    }
    this.formGroup = this.formBuilder.group<CategoryGroup>({
      categoryId: [
        categoryId,
        Validators.required
      ]
    });
  }

  async onSave () {
    let categoryId = this.formGroup.value.categoryId;
    if (this.addingCategory && this.formGroup.value.categoryId) {
      this.spinnerService.startSpinner();
      categoryId = await this.referenceFieldService.handleCreateOrEditCategory(
        undefined,
        categoryId as unknown as string
      );
      this.spinnerService.stopSpinner();
    }
    this.closeModal.emit(categoryId);
    this.analyticsService.emitEvent({
      eventName: 'Save category',
      eventType: EventType.Click,
      extras: null
    });
  }
}