import { AfterViewInit, Component, Injector, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { SpinnerService } from '@core/services/spinner.service';
import { FooterState } from '@core/states/footer.state';
import { ColumnFilterRow, Columns, TopLevelFilter } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { ModalFactory } from '@yourcause/common/modals';
import { ManageFilterModalComponent } from '../manage-filter-modal/manage-filter-modal.component';
import { MyFilterService } from '../my-filters.service';

@Component({
  selector: 'gc-edit-filter-page',
  templateUrl: './edit-filter-page.component.html',
  styleUrls: ['./edit-filter-page.component.scss']
})
export class EditFilterPageComponent implements OnInit, AfterViewInit, OnDestroy {
  id = this.activatedRoute.snapshot.params.id;
  columns: Columns;
  activeFilters: ColumnFilterRow[];
  topLevelFilters: TopLevelFilter[];
  filtersToSave: ColumnFilterRow[];

  constructor (
    private myFilterService: MyFilterService,
    private activatedRoute: ActivatedRoute,
    private modalFactory: ModalFactory,
    private spinnerService: SpinnerService,
    private footerState: FooterState,
    private i18n: I18nService,
    private router: Router,
    private injector: Injector
  ) { }

  get detail () {
    return this.myFilterService.myFilterDetailMap[this.id];
  }

  ngOnInit () {
    this.setFooterInfo();
  }

  ngAfterViewInit () {
    this.setColumnsAndActiveFilters();
  }

  setColumnsAndActiveFilters () {
    this.columns = this.myFilterService.getFilterColumnsByPageType(
      this.detail.pageId,
      this.injector
    );
    this.activeFilters = this.myFilterService.adaptFitlersToActiveFilters(
      this.detail.filters,
      this.columns
    );
    this.filtersToSave = [
      ...this.activeFilters
    ];
    this.topLevelFilters = this.myFilterService.getTopLevelFiltersByPageType(
      this.detail.pageId
    );
  }

  async editFilter () {
    const response = await this.modalFactory.open(
      ManageFilterModalComponent,
      {
        name: this.detail.name
      }
    );
    if (response) {
      this.spinnerService.startSpinner();
      await this.myFilterService.handleAddOrUpdateFilterConfig(
        this.id,
        response.filterName
      );
      this.spinnerService.stopSpinner();
    }
  }

  setFooterInfo () {
    this.footerState.set('footerState', this.footerState.FOOTER_STATES.ACTION);
    this.footerState.setActionLabel(
      this.i18n.translate('common:btnSave')
    );
    this.footerState.setPrimaryAction(() => this.saveChanges());
    this.footerState.setCancelLabel(this.i18n.translate('common:btnCancel'));
    this.footerState.setCancelAction(() => this.routeToFiltersPage());
  }

  activeFiltersChanged (filters: ColumnFilterRow[]) {
    this.filtersToSave = filters;
  }

  async saveChanges () {
    this.spinnerService.startSpinner();
    await this.myFilterService.saveFilterDetail(
      this.id,
      this.filtersToSave
    );
    this.routeToFiltersPage();
    this.spinnerService.stopSpinner();
  }

  routeToFiltersPage () {
    this.router.navigate(['/management/manage-filters']);
  }

  ngOnDestroy () {
    this.footerState.clearAll();
  }
}