import { Component, Fragment, h, Prop, State, Watch } from '@stencil/core';
import apiFetch from '../../../../functions/fetch';
import { __ } from '@wordpress/i18n';
export class ScPasswordNag {
  constructor() {
    this.open = true;
    /** The type of alert. */
    this.type = 'primary';
    /** Ensures strong password validation. */
    this.enableValidation = true;
  }
  handleSetChange() {
    setTimeout(() => {
      this.input && this.input.triggerFocus();
    }, 50);
  }
  /** Dismiss the form. */
  async dismiss() {
    this.loading = true;
    this.error = '';
    try {
      await apiFetch({
        path: `wp/v2/users/me`,
        method: 'PATCH',
        data: {
          meta: {
            default_password_nag: false,
          },
        },
      });
      this.open = false;
    }
    catch (e) {
      this.error = (e === null || e === void 0 ? void 0 : e.message) || __('Something went wrong', 'surecart');
      this.loading = false;
    }
  }
  validatePassword(password) {
    const regex = new RegExp('^(?=.*?[#?!@$%^&*-]).{6,}$');
    if (regex.test(password))
      return true;
    return false;
  }
  /** Handle password submit. */
  async handleSubmit(e) {
    this.loading = true;
    this.error = '';
    try {
      const { password, password_confirm } = await e.target.getFormJson();
      if (password !== password_confirm) {
        throw { message: __('Passwords do not match.', 'surecart') };
      }
      if (this.enableValidation && !this.validatePassword(password)) {
        throw { message: __('Passwords should at least 6 characters and contain one special character.', 'surecart') };
      }
      await apiFetch({
        path: `wp/v2/users/me`,
        method: 'PATCH',
        data: {
          password,
          meta: {
            default_password_nag: false,
          },
        },
      });
      this.dismiss();
      this.success = true;
    }
    catch (e) {
      this.error = (e === null || e === void 0 ? void 0 : e.message) || __('Something went wrong', 'surecart');
      this.loading = false;
    }
  }
  render() {
    if (this.success) {
      return (h("sc-alert", { type: "success", open: true },
        h("span", { slot: "title" }, __('Succcess!', 'surecart')),
        __('You have successfully set your password.', 'surecart')));
    }
    return (h("sc-alert", { type: this.type, open: this.open, exportparts: "base, icon, text, title, message, close-icon", style: { position: 'relative' } },
      !!this.error && this.error,
      this.set ? (h("sc-dashboard-module", { class: "customer-details" },
        h("span", { slot: "heading" },
          __('Set A Password', 'surecart'),
          " "),
        h("sc-button", { type: "text", size: "small", slot: "end", onClick: () => (this.set = false) },
          h("sc-icon", { name: "x", slot: "prefix" }),
          __('Cancel', 'surecart')),
        h("sc-card", null,
          h("sc-form", { onScFormSubmit: e => this.handleSubmit(e) },
            h("sc-input", { label: __('New Password', 'surecart'), name: "password", type: "password", required: true, ref: el => (this.input = el) }),
            h("sc-input", { label: __('Confirm New Password', 'surecart'), name: "password_confirm", type: "password", required: true }),
            h("div", null,
              h("sc-button", { type: "primary", full: true, submit: true, busy: this.loading }, __('Update Password', 'surecart'))))))) : (h(Fragment, null,
        h("slot", { name: "title", slot: "title" }, __('Reminder', 'surecart')),
        h("slot", null, __('You have not yet set a password. Please set a password for your account.', 'surecart')),
        h("sc-flex", { "justify-content": "flex-start" },
          h("sc-button", { size: "small", type: "primary", onClick: () => (this.set = true) }, __('Set A Password', 'surecart')),
          h("sc-button", { size: "small", type: "text", onClick: () => this.dismiss() }, __('Dismiss', 'surecart'))))),
      this.loading && h("sc-block-ui", { spinner: true })));
  }
  static get is() { return "sc-password-nag"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-password-nag.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-password-nag.css"]
  }; }
  static get properties() { return {
    "open": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "open",
      "reflect": false,
      "defaultValue": "true"
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'primary' | 'success' | 'info' | 'warning' | 'danger'",
        "resolved": "\"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The type of alert."
      },
      "attribute": "type",
      "reflect": true,
      "defaultValue": "'primary'"
    },
    "successUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The success url."
      },
      "attribute": "success-url",
      "reflect": false
    },
    "enableValidation": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Ensures strong password validation."
      },
      "attribute": "enable-validation",
      "reflect": true,
      "defaultValue": "true"
    }
  }; }
  static get states() { return {
    "set": {},
    "loading": {},
    "error": {},
    "success": {}
  }; }
  static get watchers() { return [{
      "propName": "set",
      "methodName": "handleSetChange"
    }]; }
}
