import { proxyCustomElement, HTMLElement, h, Fragment, Host } from '@stencil/core/internal/client';
import { _ as __ } from './default-i18n.js';
import './index2.js';
import { a as state$1 } from './watchers.js';
import './watchers2.js';
import { s as state, g as getAvailableProcessor, h as hasMultipleProcessorChoices, a as availableProcessors, b as availableManualPaymentMethods } from './getters.js';
import { s as state$2 } from './watchers3.js';
import { M as ManualPaymentMethods, d as defineCustomElement$b } from './sc-checkout-mollie-payment2.js';
import { d as defineCustomElement$e } from './sc-alert2.js';
import { d as defineCustomElement$d } from './sc-block-ui2.js';
import { d as defineCustomElement$c } from './sc-card2.js';
import { d as defineCustomElement$a } from './sc-divider2.js';
import { d as defineCustomElement$9 } from './sc-form-control2.js';
import { d as defineCustomElement$8 } from './sc-icon2.js';
import { d as defineCustomElement$7 } from './sc-payment-method-choice2.js';
import { d as defineCustomElement$6 } from './sc-payment-selected2.js';
import { d as defineCustomElement$5 } from './sc-skeleton2.js';
import { d as defineCustomElement$4 } from './sc-spinner2.js';
import { d as defineCustomElement$3 } from './sc-tag2.js';
import { d as defineCustomElement$2 } from './sc-tooltip2.js';

const scPaymentCss = ":host{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;font-weight:var(--sc-font-weight-semibold)}.sc-payment-label{display:flex;justify-content:space-between}.sc-payment-instructions{color:var(--sc-color-gray-600);font-size:var(--sc-font-size-small);line-height:var(--sc-line-height-dense)}.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.__attachShadow();
  }
  componentWillLoad() {
    state.disabled.processors = this.disabledProcessorTypes;
  }
  renderStripe(processor) {
    return (h("sc-payment-method-choice", { key: processor === null || processor === void 0 ? void 0 : processor.id, "processor-id": "stripe", card: this.stripePaymentElement }, 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__stripe-card-element" }, h("slot", { name: "stripe" }))));
  }
  renderPayPal(processor) {
    const stripe = getAvailableProcessor('stripe');
    return (h(Fragment, null, h("sc-payment-method-choice", { key: processor === null || processor === void 0 ? void 0 : processor.id, "processor-id": "paypal" }, h("span", { slot: "summary", class: "sc-payment-toggle-summary" }, h("sc-icon", { name: "paypal", style: { width: '80px', fontSize: '24px' } })), h("sc-card", null, h("sc-payment-selected", { label: __('PayPal selected for check out.', 'surecart') }, h("sc-icon", { slot: "icon", name: "paypal", style: { width: '80px' } }), __('Another step will appear after submitting your order to complete your purchase details.', 'surecart')))), !stripe && (h("sc-payment-method-choice", { key: processor === null || processor === void 0 ? void 0 : processor.id, "processor-id": "paypal", "method-id": "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("sc-card", null, h("sc-payment-selected", { label: __('Credit Card selected for check out.', 'surecart') }, h("sc-icon", { name: "credit-card", slot: "icon", style: { fontSize: '24px' } }), __('Another step will appear after submitting your order to complete your purchase details.', 'surecart')))))));
  }
  render() {
    var _a, _b, _c;
    // payment is not required for this order.
    if (((_a = state$1.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_required) === false) {
      return null;
    }
    const Tag = hasMultipleProcessorChoices() || (state$2 === null || state$2 === void 0 ? void 0 : state$2.id) === 'paypal' ? 'sc-toggles' : 'div';
    const mollie = getAvailableProcessor('mollie');
    return (h(Host, null, h("sc-form-control", { label: this.label, exportparts: "label, help-text, form-control" }, h("div", { class: "sc-payment-label", slot: "label" }, h("div", null, this.label), state$1.mode === 'test' && !this.hideTestModeBadge && (h("sc-tag", { type: "warning", size: "small", exportparts: "base:test-badge__base, content:test-badge__content" }, __('Test Mode', 'surecart')))), (mollie === null || mollie === void 0 ? void 0 : mollie.id) ? (h("sc-checkout-mollie-payment", { "processor-id": mollie === null || mollie === void 0 ? void 0 : mollie.id })) : (h(Tag, { collapsible: false, theme: "container" }, !((_b = availableProcessors()) === null || _b === void 0 ? void 0 : _b.length) && !((_c = availableManualPaymentMethods()) === null || _c === void 0 ? void 0 : _c.length) && (h("sc-alert", { type: "info", open: true }, __('You do not have any processors enabled for this mode and cart. Please configure your processors.', 'surecart'))), (availableProcessors() || []).map(processor => {
      switch (processor === null || processor === void 0 ? void 0 : processor.processor_type) {
        case 'stripe':
          return this.renderStripe(processor);
        case 'paypal':
          return this.renderPayPal(processor);
      }
    }), h(ManualPaymentMethods, { methods: availableManualPaymentMethods() }))))));
  }
  get el() { return this; }
  static get style() { return scPaymentCss; }
}, [1, "sc-payment", {
    "stripePaymentElement": [4, "stripe-payment-element"],
    "disabledProcessorTypes": [16],
    "secureNotice": [1, "secure-notice"],
    "label": [1],
    "hideTestModeBadge": [4, "hide-test-mode-badge"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-payment", "sc-alert", "sc-block-ui", "sc-card", "sc-checkout-mollie-payment", "sc-divider", "sc-form-control", "sc-icon", "sc-payment-method-choice", "sc-payment-selected", "sc-skeleton", "sc-spinner", "sc-tag", "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$e();
      }
      break;
    case "sc-block-ui":
      if (!customElements.get(tagName)) {
        defineCustomElement$d();
      }
      break;
    case "sc-card":
      if (!customElements.get(tagName)) {
        defineCustomElement$c();
      }
      break;
    case "sc-checkout-mollie-payment":
      if (!customElements.get(tagName)) {
        defineCustomElement$b();
      }
      break;
    case "sc-divider":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "sc-form-control":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "sc-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "sc-payment-method-choice":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "sc-payment-selected":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "sc-skeleton":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "sc-spinner":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "sc-tag":
      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 };
