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';

@Component({
  selector: 'gc-update-custom-data-table-modal',
  templateUrl: './update-custom-data-table-modal.component.html',
  styleUrls: ['./update-custom-data-table-modal.component.scss']
})
export class UpdateCustomDataTableModalComponent extends YCModalComponent<{
  tableName: string;
  parentPicklistId: number;
}> implements OnInit {
  @Input() name: string;
  @Input() dataTableId: number;
  @Input() parentPicklistId: number;
  @Input() isInUse: boolean;

  formGroup: TypeSafeFormGroup<{
    tableName: string;
    parentPicklistId: number;
  }>;
  parentDataTableText = this.i18n.translate(
    'FORMS:textUpdateParentCustomDataTableText',
    {},
    'Select a parent custom data table if the values of your custom data table are dependent upon the values selected from another custom data table'
  );
  parentDataTableTypeaheadOptions: TypeaheadSelectOption<number>[];

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

  ngOnInit () {
    this.formGroup = this.formBuilder.group({
      tableName: [this.name || '', Validators.required],
      parentPicklistId: this.parentPicklistId || null
    });
    this.parentDataTableTypeaheadOptions = this.customDataTablesService.pickListIdTypeaheadOptions.filter((option) => option.value !== this.dataTableId);
  }

  handlePrimaryClick () {
    this.closeModal.emit(this.formGroup.value);
    this.analyticsService.emitEvent({
      eventName: 'Update custom data table save',
      eventType: EventType.Click,
      extras: null
    });
  }
}