import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { v, c as checkoutMachine } from './store.js';
import { _ as __ } from './default-i18n.js';
import './index2.js';
import { u as updateFormState } from './mutations2.js';
import { d as defineCustomElement$2 } from './sc-block-ui2.js';
import { d as defineCustomElement$1 } from './sc-spinner2.js';

const ScFormStateProvider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.scSetCheckoutFormState = createEvent(this, "scSetCheckoutFormState", 7);
    /** Holds our state machine service */
    this._stateService = v(checkoutMachine);
    /** Loading states for different parts of the form. */
    this.checkoutState = checkoutMachine.initialState;
  }
  /** Set the state. */
  setState(name) {
    const { send } = this._stateService;
    updateFormState(name);
    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');
  }
  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 watchers() { return {
    "checkoutState": ["handleCheckoutStateChange"]
  }; }
}, [1, "sc-form-state-provider", {
    "checkoutState": [32]
  }, [[0, "scSetState", "handleSetStateEvent"], [0, "scPaid", "handlePaid"]]]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-form-state-provider", "sc-block-ui", "sc-spinner"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-form-state-provider":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScFormStateProvider);
      }
      break;
    case "sc-block-ui":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "sc-spinner":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { ScFormStateProvider as S, defineCustomElement as d };
