'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-cd6fab62.js');
const defaultI18n = require('./default-i18n-072e75d7.js');
require('./index-20b57ec7.js');
const fetch = require('./fetch-a8709225.js');
require('./_commonjsHelpers-537d719a.js');
require('./add-query-args-17c551b6.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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    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 fetch.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 = defaultI18n.__('Something went wrong', 'surecart');
      }
      console.error(this.error);
    }
    finally {
      this.loading = false;
    }
  }
  async login() {
    try {
      this.loading = true;
      const { redirect_url } = await fetch.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 = defaultI18n.__('Something went wrong', 'surecart');
      }
    }
  }
  renderInner() {
    if (this.step === 'complete') {
      return (index.h("sc-alert", { type: "success", open: true }, index.h("sc-icon", { slot: "icon", name: "check" }), index.h("span", { slot: "title" }, defaultI18n.__('Sent!', 'surecart')), index.h("p", null, defaultI18n.__('You should receive an email shortly with a link to login.', 'surecart'))));
    }
    if (this.step === 'password' && this.email) {
      return (index.h("div", null, index.h("sc-form", { onScFormSubmit: () => this.submitMagicLink() }, index.h("sc-button", { type: "primary", submit: true, full: true }, index.h("sc-icon", { name: "mail", slot: "prefix" }), defaultI18n.__('Send a magic link', 'surecart'))), index.h("sc-divider", null, defaultI18n.__('or', 'surecart')), index.h("sc-form", { onScFormSubmit: () => this.login() }, index.h("sc-input", { label: defaultI18n.__('Enter your password', 'surecart'), type: "password", ref: el => (this.passwordInput = el), autofocus: true, required: true, onScChange: e => (this.password = e.target.value) }), index.h("sc-button", { type: "primary", outline: true, submit: true, full: true }, index.h("sc-icon", { name: "lock", slot: "prefix" }), defaultI18n.__('Login', 'surecart')))));
    }
    return (index.h("sc-form", { onScFormSubmit: () => (this.step = 'password') }, index.h("sc-input", { ref: el => (this.emailInput = el), label: "Email Address", onScChange: () => this.handleEmailChange(), required: true, autofocus: true, type: "email" }), index.h("sc-button", { type: "primary", submit: true, full: true }, index.h("sc-icon", { name: "arrow-right", slot: "suffix" }), defaultI18n.__('Next', 'surecart'))));
  }
  renderError() {
    if (this.error) {
      return (index.h("sc-alert", { open: true, type: "danger" }, index.h("span", { slot: "title" }, defaultI18n.__('Error', 'surecart')), index.h("span", { innerHTML: this.error })));
    }
  }
  render() {
    return (index.h("div", { class: "login-form" }, index.h("div", { class: "login-form__title", part: "title" }, index.h("slot", { name: "title" })), index.h("sc-card", null, this.renderInner()), this.loading && index.h("sc-block-ui", { spinner: true }), this.renderError()));
  }
  static get watchers() { return {
    "step": ["handleStepChange"]
  }; }
};
ScLogin.style = scLoginFormCss;

exports.sc_login_form = ScLogin;
