import { Component, Element, Fragment, h, Host, Prop } from '@stencil/core';
import { __ } from '@wordpress/i18n';
import { state as checkoutState } from '@store/checkout';
import { state as processorsState } from '@store/processors';
import { state as selectedProcessor } from '@store/selected-processor';
import { ManualPaymentMethods } from './ManualPaymentMethods';
import { getAvailableProcessor, hasMultipleProcessorChoices, availableManualPaymentMethods, availableProcessors } from '@store/processors/getters';
/**
 * @part base - The elements base wrapper.
 * @part form-control - The form control wrapper.
 * @part label - The input label.
 * @part help-text - Help text that describes how to use the input.
 * @part test-badge__base - Test badge base.
 * @part test-badge__content - Test badge content.
 */
export class ScPayment {
  componentWillLoad() {
    processorsState.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 = checkoutState.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_required) === false) {
      return null;
    }
    const Tag = hasMultipleProcessorChoices() || (selectedProcessor === null || selectedProcessor === void 0 ? void 0 : selectedProcessor.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),
          checkoutState.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() }))))));
  }
  static get is() { return "sc-payment"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-payment.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-payment.css"]
  }; }
  static get properties() { return {
    "stripePaymentElement": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "stripe-payment-element",
      "reflect": false
    },
    "disabledProcessorTypes": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Disabled processor types"
      }
    },
    "secureNotice": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "secure-notice",
      "reflect": false
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The input's label."
      },
      "attribute": "label",
      "reflect": false
    },
    "hideTestModeBadge": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Hide the test mode badge"
      },
      "attribute": "hide-test-mode-badge",
      "reflect": false
    }
  }; }
  static get elementRef() { return "el"; }
}
