import { Component, Prop } from '@stencil/core';
import { __ } from '@wordpress/i18n';
export class ScCheckoutUnsavedChangesWarning {
  /**
   * Add event listener for beforeunload.
   */
  componentDidLoad() {
    window.addEventListener('beforeunload', e => this.warnIfUnsavedChanges(e), { capture: true });
  }
  /**
   * Warn if status is updaing, finalizing, paying or confirming.
   */
  warnIfUnsavedChanges(e) {
    if (['updating', 'finalizing', 'confirming'].includes(this.state)) {
      console.log({ e });
      e.preventDefault();
      e.returnValue = __('Your payment is processing. Exiting this page could cause an error in your order. Please do not navigate away from this page.', 'surecart');
      return e.returnValue;
    }
  }
  static get is() { return "sc-checkout-unsaved-changes-warning"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "state": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "FormState",
        "resolved": "\"confirmed\" | \"confirming\" | \"draft\" | \"expired\" | \"failure\" | \"finalizing\" | \"idle\" | \"loading\" | \"paid\" | \"paying\" | \"redirecting\" | \"updating\"",
        "references": {
          "FormState": {
            "location": "import",
            "path": "../../../types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "state",
      "reflect": false
    }
  }; }
}
