import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
import { p as pure } from './pure.js';
import { d as defineCustomElement$4 } from './sc-form-control2.js';
import { d as defineCustomElement$3 } from './sc-input2.js';
import { d as defineCustomElement$2 } from './sc-text2.js';
import { d as defineCustomElement$1 } from './sc-tooltip2.js';

const scStripeElementCss = "sc-stripe-element{display:block}sc-stripe-element sc-input{--sc-input-height-medium:auto}.sc-stripe *{font-family:var(--sc-input-font-family);font-weight:var(--sc-input-font-weight);font-size:var(--sc-input-font-size)}.sc-stripe fieldset{margin:0 15px 20px;padding:0;border-style:none;background-color:#7795f8;box-shadow:0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #829fff;border-radius:4px}.sc-stripe .row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:15px}.sc-stripe .row+.row{border-top:1px solid #819efc}.sc-stripe label{width:15%;min-width:70px;padding:11px 0;color:#c4f0ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-stripe input,.sc-stripe button{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border-style:none}.sc-stripe input:-webkit-autofill{-webkit-text-fill-color:#fce883;transition:background-color 100000000s;-webkit-animation:1ms void-animation-out}.sc-stripe .StripeElement--webkit-autofill{background:transparent !important}.sc-stripe .StripeElement{width:100%;padding:var(--sc-input-spacing-small)}.sc-stripe input{width:100%;padding:11px;color:#fff;background-color:transparent;-webkit-animation:1ms void-animation-out}.sc-stripe input::-webkit-input-placeholder{color:#87bbfd}.sc-stripe input::-moz-placeholder{color:#87bbfd}.sc-stripe input:-ms-input-placeholder{color:#87bbfd}.sc-stripe button{display:block;width:calc(100% - 30px);height:40px;margin:40px 15px 0;background-color:#f6a4eb;box-shadow:0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffb9f6;border-radius:4px;color:#fff;font-weight:600;cursor:pointer}.sc-stripe button:active{background-color:#d782d9;box-shadow:0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #e298d8}.sc-stripe .error svg .base{fill:#fff}.sc-stripe .error svg .glyph{fill:#6772e5}.sc-stripe .error .message{color:#fff}.sc-stripe .success .icon .border{stroke:#87bbfd}.sc-stripe .success .icon .checkmark{stroke:#fff}.sc-stripe .success .title{color:#fff}.sc-stripe .success .message{color:#9cdbff}.sc-stripe .success .reset path{fill:#fff}";

const ScStripeElement = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.scPaid = createEvent(this, "scPaid", 7);
    this.scPayError = createEvent(this, "scPayError", 7);
    /** Mode for the payment */
    this.mode = 'live';
    /** The input's size. */
    this.size = 'medium';
    /** The input's help text. Alternatively, you can use the help-text slot. */
    this.secureText = '';
    /** Should we show the label */
    this.showLabel = true;
  }
  async componentWillLoad() {
    if (!this.publishableKey || !this.accountId) {
      return;
    }
    this.stripe = await pure.loadStripe(this.publishableKey, { stripeAccount: this.accountId });
    this.elements = this.stripe.elements();
  }
  async confirmPayment(val) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
    // needs to be enabled
    if (this.disabled)
      return;
    // must be finalized
    if ((val === null || val === void 0 ? void 0 : val.status) !== 'finalized')
      return;
    // must be a stripe session
    if (((_a = val === null || val === void 0 ? void 0 : val.payment_intent) === null || _a === void 0 ? void 0 : _a.processor_type) !== 'stripe')
      return;
    // must have an external intent id
    if (!((_b = val === null || val === void 0 ? void 0 : val.payment_intent) === null || _b === void 0 ? void 0 : _b.external_intent_id))
      return;
    // must have a secret
    if (!((_e = (_d = (_c = val === null || val === void 0 ? void 0 : val.payment_intent) === null || _c === void 0 ? void 0 : _c.processor_data) === null || _d === void 0 ? void 0 : _d.stripe) === null || _e === void 0 ? void 0 : _e.client_secret))
      return;
    // need an external_type
    if (!((_h = (_g = (_f = val === null || val === void 0 ? void 0 : val.payment_intent) === null || _f === void 0 ? void 0 : _f.processor_data) === null || _g === void 0 ? void 0 : _g.stripe) === null || _h === void 0 ? void 0 : _h.type))
      return;
    // prevent possible double-charges
    if (this.confirming)
      return;
    this.confirming = true;
    try {
      let response;
      if (((_l = (_k = (_j = val === null || val === void 0 ? void 0 : val.payment_intent) === null || _j === void 0 ? void 0 : _j.processor_data) === null || _k === void 0 ? void 0 : _k.stripe) === null || _l === void 0 ? void 0 : _l.type) == 'setup') {
        response = await this.confirmCardSetup((_o = (_m = val === null || val === void 0 ? void 0 : val.payment_intent) === null || _m === void 0 ? void 0 : _m.processor_data) === null || _o === void 0 ? void 0 : _o.stripe.client_secret);
      }
      else {
        response = await this.confirmCardPayment((_r = (_q = (_p = val === null || val === void 0 ? void 0 : val.payment_intent) === null || _p === void 0 ? void 0 : _p.processor_data) === null || _q === void 0 ? void 0 : _q.stripe) === null || _r === void 0 ? void 0 : _r.client_secret);
      }
      if (response === null || response === void 0 ? void 0 : response.error) {
        this.error = response.error.message;
        throw response.error;
      }
      // paid
      this.scPaid.emit();
    }
    catch (e) {
      this.scPayError.emit(e);
      if (e.message) {
        this.error = e.message;
      }
    }
    finally {
      this.confirming = false;
    }
  }
  /** Confirm card payment */
  async confirmCardPayment(secret) {
    var _a, _b;
    return this.stripe.confirmCardPayment(secret, {
      payment_method: {
        card: this.element,
        billing_details: {
          ...(((_a = this === null || this === void 0 ? void 0 : this.order) === null || _a === void 0 ? void 0 : _a.name) ? { name: this.order.name } : {}),
          ...(((_b = this === null || this === void 0 ? void 0 : this.order) === null || _b === void 0 ? void 0 : _b.email) ? { email: this.order.email } : {}),
        },
      },
    });
  }
  /** Confirm card setup. */
  async confirmCardSetup(secret) {
    var _a, _b;
    return this.stripe.confirmCardSetup(secret, {
      payment_method: {
        card: this.element,
        billing_details: {
          ...(((_a = this === null || this === void 0 ? void 0 : this.order) === null || _a === void 0 ? void 0 : _a.name) ? { name: this.order.name } : {}),
          ...(((_b = this === null || this === void 0 ? void 0 : this.order) === null || _b === void 0 ? void 0 : _b.email) ? { email: this.order.email } : {}),
        },
      },
    });
  }
  componentDidLoad() {
    if (!this.elements) {
      return;
    }
    this.elements
      .create('card', {
      style: {
        base: {
          'color': '#303238',
          'fontSize': '16px',
          'fontSmoothing': 'antialiased',
          '::placeholder': {
            color: '#CFD7DF',
          },
        },
        invalid: {
          'color': '#e5424d',
          ':focus': {
            color: '#303238',
          },
        },
      },
    })
      .mount(this.container);
    this.element = this.elements.getElement('card');
    this.element.on('change', event => { var _a; return (this.error = ((_a = event === null || event === void 0 ? void 0 : event.error) === null || _a === void 0 ? void 0 : _a.message) ? event.error.message : ''); });
    this.element.on('focus', () => (this.hasFocus = true));
    this.element.on('blur', () => (this.hasFocus = false));
  }
  render() {
    return (h(Fragment, null, h("sc-input", { class: "sc-stripe", size: this.size, label: this.label, hasFocus: this.hasFocus }, h("div", { ref: el => (this.container = el) })), this.error && (h("sc-text", { style: {
        'color': 'var(--sc-color-danger-500)',
        '--font-size': 'var(--sc-font-size-small)',
        'marginTop': '0.5em',
      } }, this.error))));
  }
  get el() { return this; }
  static get watchers() { return {
    "order": ["confirmPayment"]
  }; }
  static get style() { return scStripeElementCss; }
}, [0, "sc-stripe-element", {
    "disabled": [4],
    "order": [16],
    "accountId": [1, "account-id"],
    "publishableKey": [1, "publishable-key"],
    "mode": [1],
    "size": [513],
    "label": [1],
    "secureText": [1, "secure-text"],
    "showLabel": [4, "show-label"],
    "hasFocus": [1540, "has-focus"],
    "error": [32],
    "confirming": [32],
    "confirmCardPayment": [64],
    "confirmCardSetup": [64]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-stripe-element", "sc-form-control", "sc-input", "sc-text", "sc-tooltip"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-stripe-element":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScStripeElement);
      }
      break;
    case "sc-form-control":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "sc-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-text":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "sc-tooltip":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { ScStripeElement as S, defineCustomElement as d };
