import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { _ as __ } from './default-i18n.js';
import './index2.js';
import { o as openWormhole } from './consumer.js';
import { h as hasSubscription } from './index4.js';
import { g as getProcessorData } from './processor.js';
import { d as defineCustomElement$g } from './sc-alert2.js';
import { d as defineCustomElement$f } from './sc-card2.js';
import { d as defineCustomElement$e } from './sc-form-control2.js';
import { d as defineCustomElement$d } from './sc-icon2.js';
import { d as defineCustomElement$c } from './sc-input2.js';
import { d as defineCustomElement$b } from './sc-order-stripe-payment-element2.js';
import { d as defineCustomElement$a } from './sc-secure-notice2.js';
import { d as defineCustomElement$9 } from './sc-skeleton2.js';
import { d as defineCustomElement$8 } from './sc-stripe-element2.js';
import { d as defineCustomElement$7 } from './sc-stripe-payment-element2.js';
import { d as defineCustomElement$6 } from './sc-tag2.js';
import { d as defineCustomElement$5 } from './sc-text2.js';
import { d as defineCustomElement$4 } from './sc-toggle2.js';
import { d as defineCustomElement$3 } from './sc-toggles2.js';
import { d as defineCustomElement$2 } from './sc-tooltip2.js';

const scPaymentCss = "sc-payment{display:flex !important;flex-direction:column;gap:var(--sc-input-label-margin);position:relative;font-family:var(--sc-font-sans)}.sc-payment-toggle-summary{line-height:1;display:flex;align-items:center;gap:0.5em}.sc-payment-label{display:flex;justify-content:space-between}.sc-payment-instructions{color:var(--sc-color-gray-600)}.sc-payment__stripe-card-element{display:flex !important;flex-direction:column;gap:var(--sc-input-label-margin);position:relative}";

const ScPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.scSetProcessor = createEvent(this, "scSetProcessor", 7);
    /** The current payment method for the payment */
    this.processor = 'stripe';
    /** List of available processors. */
    this.processors = [];
    /** Is this created in "test" mode */
    this.mode = 'live';
    /** The currency code. */
    this.currencyCode = 'usd';
    /** Default */
    this.defaultProcessor = 'stripe';
  }
  handleOrderChange(_, prev) {
    if (!prev) {
      this.handleDefaultChange();
    }
  }
  handleDefaultChange() {
    if (this.defaultProcessor) {
      this.scSetProcessor.emit(this.defaultProcessor);
    }
  }
  componentWillLoad() {
    this.setProcessors();
  }
  /** Set the processors for this order. */
  setProcessors() {
    this.stripe = (this.processors || []).find(processor => processor.processor_type === 'stripe' && (processor === null || processor === void 0 ? void 0 : processor.live_mode) === (this.mode === 'live'));
    this.paypal = (this.processors || []).find(processor => processor.processor_type === 'paypal' && (processor === null || processor === void 0 ? void 0 : processor.live_mode) === (this.mode === 'live'));
  }
  /**
   * Render the payment element.
   */
  renderStripePaymentElement() {
    if (this.stripePaymentElement) {
      return h("sc-order-stripe-payment-element", { order: this.order, mode: this.mode, processors: this.processors, "currency-code": this.currencyCode });
    }
    const data = getProcessorData(this.processors, 'stripe', this.mode);
    return (h("div", { class: "sc-payment__stripe-card-element" }, h("sc-stripe-element", { order: this.order, mode: this.mode, publishableKey: data === null || data === void 0 ? void 0 : data.publishable_key, accountId: data === null || data === void 0 ? void 0 : data.account_id, secureText: this.secureNotice }), h("sc-secure-notice", null, this.secureNotice)));
  }
  renderTestModeBadge() {
    if (this.hideTestModeBadge)
      return null;
    return (this.mode === 'test' && (h("sc-tag", { type: "warning", size: "small" }, __('Test Mode', 'surecart'))));
  }
  /**
   * Render Stripe and Paypal radio buttons.
   */
  renderStripeAndPayPal() {
    return (h("sc-form-control", { label: this.label }, h("div", { class: "sc-payment-label", slot: "label" }, h("div", null, this.label), this.renderTestModeBadge()), h("sc-toggles", { collapsible: false, theme: "container" }, h("sc-toggle", { class: "sc-stripe-toggle", "show-control": true, shady: true, borderless: true, open: this.processor === 'stripe', onScShow: () => this.scSetProcessor.emit('stripe') }, h("span", { slot: "summary", class: "sc-payment-toggle-summary" }, h("sc-icon", { name: "credit-card", style: { fontSize: '24px' } }), h("span", null, __('Credit Card', 'surecart'))), this.renderStripePaymentElement()), h("sc-toggle", { class: "sc-paypal-toggle", "show-control": true, shady: true, borderless: true, open: this.processor === 'paypal', onScShow: () => this.scSetProcessor.emit('paypal') }, h("span", { slot: "summary", class: "sc-payment-toggle-summary" }, h("sc-icon", { name: "paypal", style: { width: '80px', fontSize: '24px' } })), h("div", { class: "sc-payment-instructions" }, __('You will be prompted by PayPal to complete your purchase securely.', 'surecart'))))));
  }
  /**
   * Render PayPal options.
   */
  renderPayPal() {
    return (h("sc-form-control", { label: this.label }, h("div", { class: "sc-payment-label", slot: "label" }, h("div", null, this.label), this.renderTestModeBadge()), h("sc-toggles", { collapsible: false, theme: "container" }, h("sc-toggle", { "data-test-id": "paypal-credit-card-toggle", "show-control": true, shady: true, borderless: true, open: this.processor === 'paypal-card', onScShow: () => this.scSetProcessor.emit('paypal-card') }, h("span", { slot: "summary", class: "sc-payment-toggle-summary" }, h("sc-icon", { name: "credit-card", style: { fontSize: '24px' } }), h("span", null, __('Credit Card', 'surecart'))), h("div", { class: "sc-payment-instructions" }, __('You will be prompted to complete your purchase securely.', 'surecart'))), h("sc-toggle", { "data-test-id": "paypal-toggle", "show-control": true, shady: true, borderless: true, open: this.processor === 'paypal', onScShow: () => this.scSetProcessor.emit('paypal') }, h("span", { slot: "summary", class: "sc-payment-toggle-summary" }, h("sc-icon", { name: "paypal", style: { width: '80px', fontSize: '24px' } })), h("div", { class: "sc-payment-instructions" }, __('You will be prompted by PayPal to complete your purchase securely.', 'surecart'))))));
  }
  renderLoading() {
    return (h("div", null, h("sc-skeleton", { style: { width: '10%', marginBottom: '1em' } }), h("sc-skeleton", { style: { width: '100%', marginBottom: '1em' } }), h("sc-skeleton", { style: { width: '35%' } })));
  }
  getProcessor() {
    switch (this.processor) {
      case 'paypal':
      case 'paypal-card':
        return 'paypal';
      default:
        return 'stripe';
    }
  }
  renderNoProcessors() {
    return (h("sc-form-control", { label: this.label }, h("sc-alert", { type: "info", open: true }, __('Please contact us for payment', 'surecart'))));
  }
  render() {
    var _a, _b, _c, _d, _e;
    // no payment is required if we dont have a subscription and the total amount is 0.
    if (!hasSubscription(this.order)) {
      if (((_c = (_b = (_a = this.order) === null || _a === void 0 ? void 0 : _a.line_items) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.count) >= 1 && ((_d = this.order) === null || _d === void 0 ? void 0 : _d.total_amount) === 0) {
        return null;
      }
    }
    // we don't have any processors.
    if (!((_e = this.processors) === null || _e === void 0 ? void 0 : _e.length)) {
      console.warn('No processors are configured for this merchant.');
      return this.renderNoProcessors();
    }
    // both stripe and paypal are enabled.
    if (this.stripe && this.paypal) {
      return this.renderStripeAndPayPal();
    }
    // we have stripe.
    if (this.stripe) {
      return (h("sc-form-control", { label: this.label }, h("div", { class: "sc-payment-label", slot: "label" }, h("div", null, this.label), this.renderTestModeBadge()), this.stripePaymentElement ? h("sc-card", null, this.renderStripePaymentElement()) : this.renderStripePaymentElement()));
    }
    // we have paypal.
    if (this.paypal) {
      return this.renderPayPal();
    }
    console.warn(`No processors are configured for the current cart items and mode. (${this.mode})`);
    // render no processors message.
    return this.renderNoProcessors();
  }
  static get watchers() { return {
    "order": ["handleOrderChange"],
    "defaultProcessor": ["handleDefaultChange"],
    "processors": ["setProcessors"],
    "mode": ["setProcessors"]
  }; }
  static get style() { return scPaymentCss; }
}, [0, "sc-payment", {
    "processor": [1],
    "processors": [16],
    "order": [16],
    "loading": [4],
    "busy": [4],
    "mode": [1],
    "secureNotice": [1, "secure-notice"],
    "label": [1],
    "paymentMethod": [1, "payment-method"],
    "currencyCode": [1, "currency-code"],
    "defaultProcessor": [1, "default-processor"],
    "hideTestModeBadge": [4, "hide-test-mode-badge"],
    "stripePaymentElement": [4, "stripe-payment-element"],
    "stripe": [32],
    "paypal": [32]
  }]);
openWormhole(ScPayment$1, ['processor', 'processors', 'order', 'mode', 'paymentMethod', 'loading', 'busy', 'currencyCode', 'stripePaymentElement'], false);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-payment", "sc-alert", "sc-card", "sc-form-control", "sc-icon", "sc-input", "sc-order-stripe-payment-element", "sc-secure-notice", "sc-skeleton", "sc-stripe-element", "sc-stripe-payment-element", "sc-tag", "sc-text", "sc-toggle", "sc-toggles", "sc-tooltip"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-payment":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScPayment$1);
      }
      break;
    case "sc-alert":
      if (!customElements.get(tagName)) {
        defineCustomElement$g();
      }
      break;
    case "sc-card":
      if (!customElements.get(tagName)) {
        defineCustomElement$f();
      }
      break;
    case "sc-form-control":
      if (!customElements.get(tagName)) {
        defineCustomElement$e();
      }
      break;
    case "sc-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$d();
      }
      break;
    case "sc-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$c();
      }
      break;
    case "sc-order-stripe-payment-element":
      if (!customElements.get(tagName)) {
        defineCustomElement$b();
      }
      break;
    case "sc-secure-notice":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "sc-skeleton":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "sc-stripe-element":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "sc-stripe-payment-element":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "sc-tag":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "sc-text":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "sc-toggle":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "sc-toggles":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-tooltip":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const ScPayment = ScPayment$1;
const defineCustomElement = defineCustomElement$1;

export { ScPayment, defineCustomElement };
