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

@Component({
  selector: 'gc-document-format-modal',
  templateUrl: './document-format-modal.component.html',
  styleUrls: ['./document-format-modal.component.scss']
})
export class DocumentFormatModalComponent extends YCModalComponent<TemplateMarginsForUI> implements OnInit {

  @Input() margins: TemplateMarginsForUI;

  PanelTypes = PanelTypes;

  formatDocumentText = this.i18n.translate(
    'common:hdrFormatDocument',
    {},
    'Format Document'
  );

  formGroup: TypeSafeFormGroup<TemplateMarginsForUI>;

  constructor (
    private i18n: I18nService,
    private formBuilder: TypeSafeFormBuilder,
    private analyticsService: AnalyticsService
    ) {
    super();
  }
  ngOnInit () {
    this.formGroup = this.formBuilder.group({
      right: [this.margins.right, Validators.required],
      left: [this.margins.left, Validators.required],
      top: [this.margins.top, Validators.required],
      bottom: [this.margins.bottom, Validators.required]
    });
  }

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

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