import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { _ as __ } from './default-i18n.js';
import './index2.js';
import { a as apiFetch } from './fetch.js';
import { d as defineCustomElement$c } from './sc-alert2.js';
import { d as defineCustomElement$b } from './sc-block-ui2.js';
import { d as defineCustomElement$a } from './sc-button2.js';
import { d as defineCustomElement$9 } from './sc-card2.js';
import { d as defineCustomElement$8 } from './sc-divider2.js';
import { d as defineCustomElement$7 } from './sc-form2.js';
import { d as defineCustomElement$6 } from './sc-form-control2.js';
import { d as defineCustomElement$5 } from './sc-icon2.js';
import { d as defineCustomElement$4 } from './sc-input2.js';
import { d as defineCustomElement$3 } from './sc-spinner2.js';
import { d as defineCustomElement$2 } from './sc-tooltip2.js';

const scLoginFormCss = ".login-form{margin:var(--sc-spacing-xx-large) auto;max-width:400px;position:relative}.login-form__title{text-align:center;margin-bottom:var(--sc-spacing-medium);font-size:var(--sc-font-size-xx-large);font-weight:var(--sc-font-weight-bold)}";

const ScLogin = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.step = '';
    this.email = '';
    this.password = '';
  }
  /** Focus the password field automatically on password step. */
  handleStepChange() {
    if (this.step === 'password') {
      setTimeout(() => {
        this.passwordInput.triggerFocus();
      }, 50);
    }
  }
  handleEmailChange() {
    this.email = this.emailInput.value;
  }
  /** Get all subscriptions */
  async submitMagicLink() {
    try {
      this.loading = true;
      await apiFetch({
        method: 'POST',
        path: 'surecart/v1/customer_links',
        data: {
          email: this.email,
          return_url: window.location.href,
        },
      });
      this.step = 'complete';
    }
    catch (e) {
      if (e === null || e === void 0 ? void 0 : e.message) {
        this.error = e.message;
      }
      else {
        this.error = __('Something went wrong', 'surecart');
      }
      console.error(this.error);
    }
    finally {
      this.loading = false;
    }
  }
  async login() {
    try {
      this.loading = true;
      const { redirect_url } = await apiFetch({
        method: 'POST',
        path: 'surecart/v1/login',
        data: {
          login: this.email,
          password: this.password,
        },
      });
      if (redirect_url) {
        window.location.replace(redirect_url);
      }
      else {
        window.location.reload();
      }
    }
    catch (e) {
      console.error(this.error);
      this.loading = false;
      if (e === null || e === void 0 ? void 0 : e.message) {
        this.error = e.message;
      }
      else {
        this.error = __('Something went wrong', 'surecart');
      }
    }
  }
  renderInner() {
    if (this.step === 'complete') {
      return (h("sc-alert", { type: "success", open: true }, h("sc-icon", { slot: "icon", name: "check" }), h("span", { slot: "title" }, __('Sent!', 'surecart')), h("p", null, __('You should receive an email shortly with a link to login.', 'surecart'))));
    }
    if (this.step === 'password' && this.email) {
      return (h("div", null, h("sc-form", { onScFormSubmit: () => this.submitMagicLink() }, h("sc-button", { type: "primary", submit: true, full: true }, h("sc-icon", { name: "mail", slot: "prefix" }), __('Send a magic link', 'surecart'))), h("sc-divider", null, __('or', 'surecart')), h("sc-form", { onScFormSubmit: () => this.login() }, h("sc-input", { label: __('Enter your password', 'surecart'), type: "password", ref: el => (this.passwordInput = el), autofocus: true, required: true, onScChange: e => (this.password = e.target.value) }), h("sc-button", { type: "primary", outline: true, submit: true, full: true }, h("sc-icon", { name: "lock", slot: "prefix" }), __('Login', 'surecart')))));
    }
    return (h("sc-form", { onScFormSubmit: () => (this.step = 'password') }, h("sc-input", { ref: el => (this.emailInput = el), label: "Email Address", onScChange: () => this.handleEmailChange(), required: true, autofocus: true, type: "email" }), h("sc-button", { type: "primary", submit: true, full: true }, h("sc-icon", { name: "arrow-right", slot: "suffix" }), __('Next', 'surecart'))));
  }
  renderError() {
    if (this.error) {
      return (h("sc-alert", { open: true, type: "danger" }, h("span", { slot: "title" }, __('Error', 'surecart')), h("span", { innerHTML: this.error })));
    }
  }
  render() {
    return (h("div", { class: "login-form" }, h("div", { class: "login-form__title", part: "title" }, h("slot", { name: "title" })), h("sc-card", null, this.renderInner()), this.loading && h("sc-block-ui", { spinner: true }), this.renderError()));
  }
  static get watchers() { return {
    "step": ["handleStepChange"]
  }; }
  static get style() { return scLoginFormCss; }
}, [1, "sc-login-form", {
    "step": [32],
    "email": [32],
    "password": [32],
    "loading": [32],
    "error": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-login-form", "sc-alert", "sc-block-ui", "sc-button", "sc-card", "sc-divider", "sc-form", "sc-form-control", "sc-icon", "sc-input", "sc-spinner", "sc-tooltip"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-login-form":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScLogin);
      }
      break;
    case "sc-alert":
      if (!customElements.get(tagName)) {
        defineCustomElement$c();
      }
      break;
    case "sc-block-ui":
      if (!customElements.get(tagName)) {
        defineCustomElement$b();
      }
      break;
    case "sc-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "sc-card":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "sc-divider":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "sc-form":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "sc-form-control":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "sc-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "sc-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "sc-spinner":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-tooltip":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const ScLoginForm = ScLogin;
const defineCustomElement = defineCustomElement$1;

export { ScLoginForm, defineCustomElement };
