import { Component, Input } from '@angular/core';
import { GCDashboards } from '@features/dashboards/dashboards.typing';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';

@Component({
  selector: 'gc-unsaved-changes-modal',
  templateUrl: './unsaved-changes-modal.component.html',
  styleUrls: ['./unsaved-changes-modal.component.scss']
})
export class UnsavedChangesModalComponent extends YCModalComponent<GCDashboards.UnsavedChangesResponse> {
  @Input() modalHeader = this.i18n.translate(
    'common:hdrUnsavedChanges2',
    {},
    'Unsaved Changes'
  );
  @Input() primaryButtonText = this.i18n.translate(
    'common:textNoStayOnPage',
    {},
    'No, stay on page'
  );
  @Input() secondaryButtonText = this.i18n.translate(
    'common:textSaveChangesAndLeavePage',
    {},
    'Save changes and leave page'
  );
  @Input() confirmText = this.i18n.translate(
    'common:textYouHaveUnsavedChanges',
    {},
    'You have unsaved changes which will be lost if you navigate away. Do you want to leave the current page?'
  );

  UnsavedChangesResponse = GCDashboards.UnsavedChangesResponse;

  constructor (
    private i18n: I18nService
  ) {
    super();
  }
}