import { Component } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { ReferenceFieldAPI } from '@core/typings/api/reference-fields.typing';
import { ArrayHelpersService, TopLevelFilter } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { ConfirmationModalComponent, ModalFactory } from '@yourcause/common/modals';
import { map } from 'rxjs';
import { CreateEditCategoryModalComponent } from '../create-edit-category-modal/create-edit-category-modal.component';
import { ReferenceFieldsService } from '../services/reference-fields.service';

@Component({
  selector: 'gc-categories-page',
  templateUrl: './categories-page.component.html',
  styleUrls: ['./categories-page.component.scss']
})
export class CategoriesPageComponent {
  categories$ = this.referenceFieldService.changesTo$('categories').pipe(
    map((categories) => {
      return this.arrayHelper.sort(categories || [], 'createdDate', true);
    }));
  topLevelFilters: TopLevelFilter[] = [
    new TopLevelFilter(
      'text',
      'name',
      '',
      this.i18n.translate('common:textSearchByName', {}, 'Search by name')
    )
  ];

  constructor (
    private modalFactory: ModalFactory,
    private spinnerService: SpinnerService,
    private referenceFieldService: ReferenceFieldsService,
    private i18n: I18nService,
    private arrayHelper: ArrayHelpersService
  ) { }

  async editCategory (category: ReferenceFieldAPI.Category) {
    const categoryName = await this.modalFactory.open(
      CreateEditCategoryModalComponent,
      {
        categoryName: category.name
      }
    );
    if (categoryName) {
      this.spinnerService.startSpinner();
      await this.referenceFieldService.handleCreateOrEditCategory(
        category.id,
        categoryName
      );
      this.spinnerService.stopSpinner();
    }
  }

  async deleteCategory (row: ReferenceFieldAPI.Category) {
    const response = await this.modalFactory.open(
      ConfirmationModalComponent,
      {
        modalHeader: this.i18n.translate(
          'GLOBAL:hdrDeleteCategory',
          {},
          'Delete Category'
        ),
        modalSubHeader: row.name,
        confirmButtonText: this.i18n.translate(
          'common:btnDelete',
          {},
          'Delete'
        ),
        confirmText: this.i18n.translate(
          'GLOBAL:textConfirmDeleteCategory',
          {},
          'Are you sure you want to delete the category?'
        )
      }
    );
    if (response) {
      this.spinnerService.startSpinner();
      await this.referenceFieldService.handleDeleteCategory(
        row.id
      );
      this.spinnerService.stopSpinner();
    }
  }
}