import { Component, h, State, Event, Listen, Watch } from '@stencil/core';
import { checkoutMachine } from './checkout-machine';
import { interpret } from '@xstate/fsm';
import { __ } from '@wordpress/i18n';
/**
 * This component listens for a confirmed event and redirects to the success url.
 */
export class ScFormStateProvider {
  constructor() {
    /** Holds our state machine service */
    this._stateService = interpret(checkoutMachine);
    /** Loading states for different parts of the form. */
    this.checkoutState = checkoutMachine.initialState;
  }
  /** Set the state. */
  setState(name) {
    const { send } = this._stateService;
    return send(name);
  }
  /** Watch for checkout state changes and emit to listeners. */
  handleCheckoutStateChange(state) {
    this.scSetCheckoutFormState.emit(state.value);
  }
  /** Init the state service. */
  componentWillLoad() {
    // Start state machine.
    this._stateService.subscribe(state => (this.checkoutState = state));
    this._stateService.start();
  }
  /** Remove state machine on disconnect. */
  disconnectedCallback() {
    this._stateService.stop();
  }
  /** Allow children to set the form state. */
  handleSetStateEvent(e) {
    this.setState(e.detail);
  }
  /** Update the state when the order is paid. */
  async handlePaid() {
    this.setState('PAID');
  }
  /** Update the state when the order is paid. */
  async handleConfirmed() {
    this.setState('CONFIRMED');
  }
  render() {
    // handle expired.
    if (this.checkoutState.value === 'expired') {
      return (h("sc-block-ui", null,
        h("div", null, __('Please refresh the page.', 'surecart'))));
    }
    return h("slot", null);
  }
  static get is() { return "sc-form-state-provider"; }
  static get encapsulation() { return "shadow"; }
  static get states() { return {
    "checkoutState": {}
  }; }
  static get events() { return [{
      "method": "scSetCheckoutFormState",
      "name": "scSetCheckoutFormState",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Set the state."
      },
      "complexType": {
        "original": "FormState",
        "resolved": "\"draft\" | \"expired\" | \"failure\" | \"finalizing\" | \"idle\" | \"loading\" | \"paid\" | \"updating\"",
        "references": {
          "FormState": {
            "location": "import",
            "path": "../../../types"
          }
        }
      }
    }]; }
  static get watchers() { return [{
      "propName": "checkoutState",
      "methodName": "handleCheckoutStateChange"
    }]; }
  static get listeners() { return [{
      "name": "scSetState",
      "method": "handleSetStateEvent",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "scPaid",
      "method": "handlePaid",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "scConfirmed",
      "method": "handleConfirmed",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
