import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';

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

  formGroup: TypeSafeFormGroup<{ name: string }>;

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

  ngOnInit () {
    this.setModalHeader();
    this.formGroup = this.formBuilder.group({
      name: [
        this.name || '',
         [
           Validators.required,
           Validators.maxLength(200)
         ]
        ]
    });
  }

  setModalHeader () {
    if (!this.modalHeader) {
      this.modalHeader = this.name ?
        this.i18n.translate(
          'DASHBOARD:hdrRenameDashboard',
          {},
          'Rename Dashboard'
        ) : this.i18n.translate(
          'DASHBOARD:hdrNewDashboard',
          {},
          'New Dashboard'
        );
    }
  }

  handlePrimaryClick () {
    this.closeModal.emit(this.formGroup.value.name);
    this.analyticsService.emitClick(
      'Submit dashboard name'
    );
  }
}