import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { _ as __, s as sprintf } from './default-i18n.js';
import './index2.js';
import { a as apiFetch } from './fetch.js';
import { d as defineCustomElement$c } from './sc-block-ui2.js';
import { d as defineCustomElement$b } from './sc-button2.js';
import { d as defineCustomElement$a } from './sc-card2.js';
import { d as defineCustomElement$9 } from './sc-divider2.js';
import { d as defineCustomElement$8 } from './sc-form2.js';
import { d as defineCustomElement$7 } from './sc-icon2.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-toggle2.js';
import { d as defineCustomElement$2 } from './sc-toggles2.js';
import { a as addQueryArgs } from './add-query-args.js';

const scMollieAddMethodCss = ":host{display:block}";

const ScMollieAddMethod$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.methods = [];
  }
  componentWillLoad() {
    this.fetchMethods();
  }
  async createPaymentIntent() {
    var _a, _b, _c, _d;
    try {
      this.loading = true;
      this.error = '';
      this.paymentIntent = await apiFetch({
        method: 'POST',
        path: 'surecart/v1/payment_intents',
        data: {
          processor_type: 'mollie',
          live_mode: this.liveMode,
          customer_id: this.customerId,
          return_url: this.successUrl,
          payment_method_type: this.selectedMethodId,
          currency: this.currency,
        },
      });
      console.log(this.paymentIntent);
      if ((_b = (_a = this.paymentIntent.processor_data) === null || _a === void 0 ? void 0 : _a.mollie) === null || _b === void 0 ? void 0 : _b.checkout_url) {
        window.location.assign((_d = (_c = this.paymentIntent.processor_data) === null || _c === void 0 ? void 0 : _c.mollie) === null || _d === void 0 ? void 0 : _d.checkout_url);
      }
    }
    catch (e) {
      console.error(e);
      this.error = (e === null || e === void 0 ? void 0 : e.message) || __('Something went wrong', 'surecart');
      this.loading = false;
    }
  }
  async fetchMethods() {
    var _a, _b, _c;
    try {
      this.loading = true;
      const response = (await apiFetch({
        path: addQueryArgs(`surecart/v1/processors/${this.processorId}/payment_method_types`, {
          amount: 0,
          country: this.country,
          currency: this.currency,
          reusable: true,
        }),
      }));
      this.methods = (response === null || response === void 0 ? void 0 : response.data) || [];
      if ((_a = this.methods) === null || _a === void 0 ? void 0 : _a.length) {
        this.selectedMethodId = (_c = (_b = this.methods) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.id;
      }
    }
    catch (e) {
      this.error = (e === null || e === void 0 ? void 0 : e.message) || __('Something went wrong', 'surecart');
      console.error(e);
    }
    finally {
      this.loading = false;
    }
  }
  handleSubmit() {
    this.createPaymentIntent();
  }
  renderLoading() {
    return (h("sc-card", null, h("sc-skeleton", { style: { width: '50%', marginBottom: '0.5em' } }), h("sc-skeleton", { style: { width: '30%', marginBottom: '0.5em' } }), h("sc-skeleton", { style: { width: '60%', marginBottom: '0.5em' } })));
  }
  render() {
    var _a;
    if (this.loading && !((_a = this.methods) === null || _a === void 0 ? void 0 : _a.length)) {
      return this.renderLoading();
    }
    return (h("sc-form", { onScFormSubmit: () => this.handleSubmit(), style: { position: 'relative' } }, h("sc-toggles", { collapsible: false, theme: "container" }, (this.methods || []).map(method => (h("sc-toggle", { "show-control": true, shady: true, borderless: true, open: this.selectedMethodId === (method === null || method === void 0 ? void 0 : method.id), onScShow: () => (this.selectedMethodId = method === null || method === void 0 ? void 0 : method.id) }, h("span", { slot: "summary", class: "sc-payment-toggle-summary" }, !!(method === null || method === void 0 ? void 0 : method.image) && h("img", { src: method === null || method === void 0 ? void 0 : method.image }), h("span", null, method === null || method === void 0 ? void 0 : method.description)), h("sc-card", null, h("sc-payment-selected", { label: sprintf(__('%s selected.', 'surecart'), method === null || method === void 0 ? void 0 : method.description) }, !!(method === null || method === void 0 ? void 0 : method.image) && h("img", { slot: "icon", src: method === null || method === void 0 ? void 0 : method.image, style: { width: '32px' } }), __('Another step will appear after submitting your order to add this payment method.', 'surecart'))))))), h("sc-button", { type: "primary", submit: true, full: true, loading: this.loading }, __('Add Payment Method', 'surecart')), this.loading && h("sc-block-ui", { "z-index": 9, style: { '--sc-block-ui-opacity': '0.75' } })));
  }
  static get style() { return scMollieAddMethodCss; }
}, [1, "sc-mollie-add-method", {
    "country": [1],
    "successUrl": [1, "success-url"],
    "processorId": [1, "processor-id"],
    "currency": [1],
    "liveMode": [4, "live-mode"],
    "customerId": [1, "customer-id"],
    "methods": [32],
    "loading": [32],
    "error": [32],
    "selectedMethodId": [32],
    "paymentIntent": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-mollie-add-method", "sc-block-ui", "sc-button", "sc-card", "sc-divider", "sc-form", "sc-icon", "sc-payment-selected", "sc-skeleton", "sc-spinner", "sc-toggle", "sc-toggles"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-mollie-add-method":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScMollieAddMethod$1);
      }
      break;
    case "sc-block-ui":
      if (!customElements.get(tagName)) {
        defineCustomElement$c();
      }
      break;
    case "sc-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$b();
      }
      break;
    case "sc-card":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "sc-divider":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "sc-form":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "sc-icon":
      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-toggle":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-toggles":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const ScMollieAddMethod = ScMollieAddMethod$1;
const defineCustomElement = defineCustomElement$1;

export { ScMollieAddMethod, defineCustomElement };
