import { Component, Input, OnInit } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { ReferenceFieldAPI } from '@core/typings/api/reference-fields.typing';
import { ReferenceFieldsUI } from '@core/typings/ui/reference-fields.typing';
import { FormAudience } from '@features/configure-forms/form.typing';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
import { PopoverDirective } from 'ngx-bootstrap/popover';
import { ReferenceFieldsService } from '../services/reference-fields.service';

@Component({
  selector: 'gc-create-edit-reference-field-modal',
  templateUrl: './create-edit-reference-field-modal.component.html',
  styleUrls: ['./create-edit-reference-field-modal.component.scss']
})
export class CreateEditReferenceFieldModalComponent extends YCModalComponent<
  ReferenceFieldsUI.ModalReturn
> implements OnInit {
  @Input() existingReferenceField: ReferenceFieldAPI.ReferenceFieldDisplayModel;
  @Input() forceIsTableField = false;
  @Input() forceIsDataPoint = false;
  @Input() pendingKeyToBeCreated: string;
  @Input() addingFieldToForm = false;
  @Input() forcedAudienceSelection: FormAudience = null;
  @Input() isViewOnly = false;
  @Input() saveText = this.i18n.translate(
    'common:btnSave',
    {},
    'Save'
  );
  @Input() secondarySaveText: string;

  modalHeader = '';
  uniqueKeys: string[];
  existingKeys: string[];
  saving = false;
  field: ReferenceFieldAPI.ReferenceFieldBaseModel;
  isValid = false;
  isTableConfigValid = false;
  addingCategory: boolean;
  primaryButtonText: string;
  isTableConfigPage = false;
  isDataSetConfigPage = false;
  closeText = this.i18n.translate(
    'common:textClose',
    {},
    'Close'
  );
  hideModal = false;
  tableFields: ReferenceFieldsUI.TableFieldForUi[];
  popoverHeader = this.i18n.translate(
    'common:hdrUpdateFormatting',
    {},
    'Update formatting?'
  );
  popoverText = this.i18n.translate(
    'common:textAddFormattingConfirm',
    {},
    'Changing the formatting of this form field may result in differences between old a new responses. Do you want to continue?'
  );
  formatTypes = ReferenceFieldAPI.ReferenceFieldFormattingType;
  tableImportNotAllowed: boolean;

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

  get isTable () {
    return this.field?.type === ReferenceFieldsUI.ReferenceFieldTypes.Table;
  }

  get isDataSet () {
    return this.field?.type === ReferenceFieldsUI.ReferenceFieldTypes.Subset;
  }

  get showPopover () {
    return this.field?.type === ReferenceFieldsUI.ReferenceFieldTypes.TextField &&
      this.formatIsUpdated;
  }

  get formatIsUpdated () {
    return this.existingReferenceField &&
      !this.addingFieldToForm &&
      (this.field.formatType !== this.existingReferenceField.formatType) &&
      !(this.field.formatType === this.formatTypes.NONE && !this.existingReferenceField.formatType);
  }

  get onFinalStep () {
    if (this.isTable) {
      return this.isTableConfigPage;
    } else if (this.isDataSet) {
      return this.isDataSetConfigPage;
    }

    return true;
  }

  get isSaveDisabled () {
    if (!this.isViewOnly) {
      return this.saving ||
        (
          this.isTableConfigPage || this.isDataSetConfigPage ?
            !this.isTableConfigValid :
            !this.isValid
        );
    }

    return false;
  }

  ngOnInit () {
    this.setUniqueKeys();
    this.setModalHeader();
    this.setPrimaryText();
  }

  setUniqueKeys () {
    this.uniqueKeys = this.referenceFieldService.allReferenceFields.map((field) => {
      return (field.key || '').toLowerCase();
    });
    if (this.pendingKeyToBeCreated) {
      this.uniqueKeys = [
        ...this.uniqueKeys,
        this.pendingKeyToBeCreated
      ];
    }
    this.existingKeys = this.existingReferenceField?.key ?
      [this.existingReferenceField?.key.toLowerCase()] :
      [];
  }

  setModalHeader () {
    this.modalHeader = this.i18n.translate(
      this.existingReferenceField?.referenceFieldId ?
        'FORMS:hdrEditFormField' :
        'FORMS:hdrAddNewFormField',
      {},
      this.existingReferenceField?.referenceFieldId ?
        'Edit Form Field' :
        'Add New Form Field'
    );
  }

  setPrimaryText () {
    if (this.isTable) {
      if (!this.isTableConfigPage) {
        this.primaryButtonText = this.i18n.translate(
          'FORMS:textSelectTableFields',
          {},
          'Select table fields'
        );
      } else {
        this.primaryButtonText = this.isViewOnly ? this.closeText : this.saveText;
      }
    } else if (this.isDataSet) {
      if (!this.isDataSetConfigPage) {
        this.primaryButtonText = this.i18n.translate(
          'FORMS:textSelectFieldGroupOptions',
          {},
          'Select field group options'
        );
      } else {
        this.primaryButtonText = this.isViewOnly ? this.closeText : this.saveText;
      }
    } else {
      this.primaryButtonText = this.isViewOnly ? this.closeText : this.saveText;
    }
  }


  onFieldChange (field: ReferenceFieldAPI.ReferenceFieldBaseModel) {
    this.field = field;
    this.setPrimaryText();
  }

  saveOrNavigateToTableConfig (isSecondarySave = false) {
    if (this.isTableConfigPage || this.isDataSetConfigPage) {
      this.save(isSecondarySave);
      this.analyticsService.emitEvent({
        eventName: 'Save table or field group',
        eventType: EventType.Click,
        extras: null
      });
    } else {
      if (this.isTable || this.isDataSet) {
        this.isTableConfigPage = this.isTable;
        this.isDataSetConfigPage = this.isDataSet;
        this.ref.setClass('modal-full-size');
        this.setPrimaryText();
        this.analyticsService.emitEvent({
          eventName: 'Show table or field group config',
          eventType: EventType.Click,
          extras: null
        });
      } else {
        this.save(isSecondarySave);
        this.analyticsService.emitEvent({
          eventName: 'Save reference field',
          eventType: EventType.Click,
          extras: null
        });
      }
    }
  }

  onPrimaryClick (
    popover: PopoverDirective
  ) {
    if (this.showPopover) {
      setTimeout(() => {
        popover.show();
      });
    } else {
      this.saveOrNavigateToTableConfig();
    }
  }

  onSecondaryClick () {
    this.saveOrNavigateToTableConfig(true);
  }

  onBack () {
    if (this.isTableConfigPage) {
      this.isTableConfigPage = false;
    } else if (this.isDataSetConfigPage) {
      this.isDataSetConfigPage = false;
    }
    this.ref.setClass('modal-xl');
    this.setPrimaryText();
  }

  async save (isSecondarySave = false) {
    if (this.isViewOnly) {
      this.closeModal.emit();
    } else {
      this.saving = true;
      this.spinnerService.startSpinner();
      const modalReturn = await this.referenceFieldService.formatCreateEditFieldModalReturn(
        this.field,
        this.tableFields,
        this.addingCategory,
        isSecondarySave
      );
      this.spinnerService.stopSpinner();
      this.closeModal.emit(modalReturn);
    }
  }

}