import { Component, Input, OnInit } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { TopLevelFilter, TypeaheadSelectOption } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
import { CustomDataTablesService } from '../custom-data-table.service';
import { ConflictResolutionInfo, CustomDataTable, MergePicklistsPayload, PicklistConflictForUi } from '../custom-data-tables.typing';

@Component({
  selector: 'gc-merge-data-tables-modal',
  templateUrl: './merge-data-tables-modal.component.html',
  styleUrls: ['./merge-data-tables-modal.component.scss']
})
export class MergeDataTablesModalComponent extends YCModalComponent<
  MergePicklistsPayload
> implements OnInit {
  @Input() cdtToMerge: CustomDataTable;

  customDataTableOptions: TypeaheadSelectOption[] = [];
  primaryButtonText = '';
  primaryDisabledPage1: boolean;
  primaryDisabledPage2: boolean;
  idToMerge1: number;
  idToMerge2: number;
  nameToMerge2: string;
  tableOneHasDuplicateValues = false;
  tableTwoHasDuplicateValues = false;
  numberOfConflicts: number;
  results: PicklistConflictForUi[] = [];
  newName = '';
  isPageTwo = false;
  topLevelFilters: TopLevelFilter[] = [];
  ready = false;
  customDataTableOneLabel = this.i18n.translate(
    'common:textCustomDataTableNumber',
    {
      number: 1
    },
    'Custom data table __number__'
  );
  customDataTableTwoLabel = this.i18n.translate(
    'common:textCustomDataTableNumber',
    {
      number: 2
    },
    'Custom data table __number__'
  );
  conflictResolutionsMap: Record<string, ConflictResolutionInfo> = {};
  idForResults: number; // the ID we used to retrieve the results. If the same, we don't refetch when switching between modal pages

  constructor (
    private i18n: I18nService,
    private customDataTableService: CustomDataTablesService,
    private spinnerService: SpinnerService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  async ngOnInit () {
    this.idToMerge1 = this.cdtToMerge.id;
    this.newName = this.cdtToMerge.name;
    this.customDataTableOptions = this.customDataTableService.customDataTables
      .filter((item) => {
        return !item.isSystem &&
          (item.id !== this.idToMerge1) &&
          (
            (this.cdtToMerge.parentPicklistId === item.parentPicklistId) ||
            !item.parentPicklistId
          ) &&
          (this.cdtToMerge.dataType === item.dataType);
      }).map((item) => {
        return {
          label: item.name,
          value: item.id
        };
      });
    this.tableOneHasDuplicateValues = await this.checkForDuplicateOptionValues(
      this.cdtToMerge.id
    );
    this.setPrimaryTextAndDisabled();
    this.ready = true;
  }

  async checkForDuplicateOptionValues (picklistId: number) {
    this.spinnerService.startSpinner();
    const hasDupes = await this.customDataTableService.checkForDuplicateOptionValues(
      picklistId
    );
    this.spinnerService.stopSpinner();

    return hasDupes;
  }

  setPrimaryTextAndDisabled () {
    if (this.isPageTwo) {
      this.primaryButtonText = this.i18n.translate(
        'common:textMerge',
        {},
        'Merge'
      );
    } else {
      this.primaryButtonText = this.i18n.translate(
        'common:btnNext',
        {},
        'Next'
      );
      this.primaryDisabledPage1 = !this.idToMerge2 ||
        !this.newName ||
        this.tableOneHasDuplicateValues ||
        this.tableTwoHasDuplicateValues;
    }
  }

  async onDataTableTwoChange (picklistId: number) {
    this.tableTwoHasDuplicateValues = await this.checkForDuplicateOptionValues(
      picklistId
    );
    this.nameToMerge2 = this.customDataTableService.getCDTFromId(picklistId)?.name ?? '';
    this.setPrimaryTextAndDisabled();
  }

  prepareConflictResolutionsMap () {
    const map: Record<string, ConflictResolutionInfo> = {};
    this.results.forEach((result) => {
      if (result.conflictResolutionRequired) {
        map[result.id] = {
          items: this.customDataTableService.getOptionsForKeyOrValueToResolveMerge(
            result
          ),
          picklistOptionId: null
        };
      }
    });
    this.conflictResolutionsMap = map;
    this.setPrimaryDisabledPageTwo();
  }

  setPrimaryDisabledPageTwo () {
    this.primaryDisabledPage2 = Object.keys(this.conflictResolutionsMap).some((key) => {
      return !this.conflictResolutionsMap[key].picklistOptionId;
    });
  }

  async onPrimaryClick () {
    if (this.isPageTwo) {
      this.closeModal.emit(
        this.customDataTableService.adaptModalInfoForMergePayload(
          this.newName,
          this.idToMerge1,
          this.idToMerge2,
          this.conflictResolutionsMap
        )
      );
      this.analyticsService.emitEvent({
        eventName: 'Merge data tables modal submit',
        eventType: EventType.Click,
        extras: null
      });
    } else {
      const needToFetch = this.idForResults !== this.idToMerge2;
      if (needToFetch) {
        this.spinnerService.startSpinner();
        const response = await this.customDataTableService.getMergeConflictsForPicklists(
          this.idToMerge1,
          this.idToMerge2
        );
        this.spinnerService.stopSpinner();
        if (response) {
          this.idForResults = this.idToMerge2;
          this.results = response.results;
          this.prepareConflictResolutionsMap();
          this.numberOfConflicts = response.numberOfConflicts;
          if (this.numberOfConflicts > 0) {
            this.topLevelFilters = [
              new TopLevelFilter(
                'checkbox',
                'conflictResolutionRequired',
                false,
                '',
                undefined,
                this.i18n.translate(
                  'common:textOnlyShowConflicts',
                  {},
                  'Only show conflicts'
                ),
                undefined,
                true
              )
            ];
          } else {
            this.topLevelFilters = [];
          }
          this.isPageTwo = true;
        }
      } else {
        this.isPageTwo = true;
      }
      this.setPrimaryTextAndDisabled();
      this.analyticsService.emitEvent({
        eventName: 'Get merge data tables info',
        eventType: EventType.Click,
        extras: null
      });
    }
  }
}