import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl, Validators } from '@angular/forms';
import { AdHocReportingService } from '@features/reporting/services/ad-hoc-reporting.service';
import { TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { YCModalComponent } from '@yourcause/common/modals';

@Component({
  selector: 'gc-update-header-column',
  templateUrl: './update-header-column-modal.component.html',
  styleUrls: ['./update-header-column-modal.component.scss']
})
export class UpdateHeaderColumnModalComponent extends YCModalComponent<string> implements OnInit {
  @Input() name: string;
  defaultName: string;

  formGroup: TypeSafeFormGroup<{
    name: string;
  }>;

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private adHocReportingService: AdHocReportingService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    this.formGroup = this.formBuilder.group({
      name: [
        this.name,
        [
          Validators.required,
          this.specialCharactersValidator()
        ]
      ]
    });
  }

  specialCharactersValidator () {
    return (control: AbstractControl) => {
      const columnName = control.value;
      const valid = this.adHocReportingService.isColumnHeaderValid(
        columnName
      );

      if (!valid) {
        return {
          noSpecialCharacters: {
            i18nKey: 'common:textInvalidColumnHeaderSpecialChars',
            defaultValue: 'Invalid column header. Must not contain special characters.'
          }
        };
      }

      return null;
    };
  }

  onSubmit () {
    this.closeModal.emit(this.formGroup.value.name);
    this.analyticsService.emitEvent({
      eventName: 'Header column modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }

  close () {
    this.closeModal.emit();
  }
}