import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } 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 { DataTableOptionTranslations, PicklistDataType } from '../custom-data-tables.typing';

export interface AddEditDataTableOptionModalResponse {
  value: string;
  key: string;
  sortOrder: number;
  parentKeys: string[];
}

@Component({
  selector: 'gc-add-edit-custom-option-modal',
  templateUrl: './add-edit-custom-option-modal.component.html',
  styleUrls: ['./add-edit-custom-option-modal.component.scss']
})
export class AddEditCustomOptionModalComponent extends YCModalComponent<
  AddEditDataTableOptionModalResponse
> implements OnInit {
  @Input() dataType: PicklistDataType;
  @Input() value: string;
  @Input() key: string;
  @Input() sortOrder: number;
  @Input() parentPicklistId: number;
  @Input() parentKeys: string[];
  @Input() defaultLang: string;
  @Input() existingSortOrders: number[];
  @Input() existingKeys: string[];

  formGroup: TypeSafeFormGroup<AddEditDataTableOptionModalResponse>;
  parentKeyOptions: TypeaheadSelectOption[] = [];
  PicklistDataType = PicklistDataType;
  sortOrderAlert: string;

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

  async ngOnInit () {
    await this.setParentKeyOptions();
    this.formGroup = this.formBuilder.group({
      value: [this.value || '', Validators.required],
      key: [
        this.key || '',
        Validators.compose([
        Validators.required,
        (control) => {
          return this.existingKeys.includes((control?.value?.toLowerCase())) ? {
            sortOrder: {
              i18nKey: 'common:textKeyInUse',
              defaultValue: 'This key is already in use'
            }
          } : null;
        },
        //prevent commas in keys
        (control) => {
          return control?.value?.includes('\,') ? {
            sortOrder: {
              i18nKey: 'common:textInvalidKeyComma',
              defaultValue: 'Commas are not permitted in table keys'
            }
          } : null;
        }
      ])
      ],
      sortOrder: [this.sortOrder, Validators.compose([
        Validators.min(1),
        Validators.required
      ])],
      parentKeys: [this.parentKeys]
    });
  }

  async setParentKeyOptions () {
    if (this.parentPicklistId) {
      await this.customDataTableService.setCustomDataTableOptions(
        this.parentPicklistId
      );
      const options = this.customDataTableService.allCustomDataTableMap[
        this.parentPicklistId
      ] || [];
      this.parentKeyOptions = options.map((option) => {
        const found = option.values.find((opt: DataTableOptionTranslations) => {
          return opt.languageId === this.defaultLang;
        });

        return {
          label: found.text,
          value: option.key
        };
      });
    }
  }

  sortOrderChange (sortOrder: number) {
    if (this.existingSortOrders.includes(sortOrder)) {
      this.sortOrderAlert = this.i18n.translate(
        'common:textSortOrderReplaceAlert',
        {},
        'The selected sort order is already in use. The other options in the list will be adjusted accordingly to move this option into the selected position.'
      );
    } else {
      this.sortOrderAlert = '';
    }
  }

  onSubmit () {
    this.closeModal.emit(this.formGroup.value);
    this.analyticsService.emitEvent({
      eventName: 'Add edit custom data table modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }
}