import { Component, OnInit } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { DebounceFactory, PaginationOptions, TableDataFactory, TopLevelFilter } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { ConfirmationModalComponent, ModalFactory } from '@yourcause/common/modals';
import { AudienceModalComponent } from '../audience-modal/audience-modal.component';
import { AudienceResources } from '../audience.resources';
import { AudienceService } from '../audience.service';
import { Audience } from '../audience.typing';

@Component({
  selector: 'gc-audiences-page',
  templateUrl: './audiences-page.component.html',
  styleUrls: ['./audiences-page.component.scss']
})
export class AudiencesPageComponent implements OnInit {
  tableDataFactory: TableDataFactory<Audience>;
  topLevelFilters = [
    new TopLevelFilter(
      'text',
      'name',
      '',
      this.i18n.translate(
        'common:textSearchByName',
        {},
        'Search by name'
      )
    )
  ];

  constructor (
    private i18n: I18nService,
    private audienceResources: AudienceResources,
    private modalFactory: ModalFactory,
    private spinnerService: SpinnerService,
    private audienceService: AudienceService
  ) { }


  ngOnInit () {
    this.tableDataFactory = DebounceFactory.createSimple(
      async (options: PaginationOptions<Audience>) => {
        const result = await this.audienceResources.getAudiencesPaginated(options);

        return {
          success: true,
          data: {
            recordCount: result.recordCount,
            records: result.records
          }
        };
      }
    );
  }

  async audienceModal (audience?: Audience) {
    const response = await this.modalFactory.open(
      AudienceModalComponent, {
        audience
      }
    );
    if (response) {
      this.spinnerService.startSpinner();
      const success = await this.audienceService.createOrEditAudience(response);
      if (success) {
        this.tableDataFactory.reset.emit();
      }
      this.spinnerService.stopSpinner();
    }
  }

  async deleteAudience (row: Audience) {
    const deps = {
      modalHeader: this.i18n.translate(
        'CONFIG:hdrDeleteAudience',
        {},
        'Delete Audience'
      ),
      modalSubHeader: row.name,
      confirmButtonText: this.i18n.translate(
        'common:btnDelete',
        {},
        'Delete'
      ),
      confirmText: this.i18n.translate(
        'CONFIG:textDeleteAudienceDesc',
        {},
        'Deleting the audience will prevent it from being used for scheduled or manually sent reports. Are you sure you want to delete this audience? This action can not be undone.'
      )
    };
    const response = await this.modalFactory.open(
      ConfirmationModalComponent,
      deps
    );
    if (response) {
      this.spinnerService.startSpinner();
      const success = await this.audienceService.deleteAudience(row.id);
      if (success) {
        this.tableDataFactory.reset.emit();
      }
      this.spinnerService.stopSpinner();
    }
  }
}