import { h } from "@stencil/core";
import PasswordValidator from "password-validator";
import { createStyleSheet } from "../../styling/JSS";
const passwordSchema = new PasswordValidator()
  .is()
  .min(8) // Minimum length 8
  .has()
  .uppercase() // Must have uppercase letters
  .has()
  .lowercase() // Must have lowercase letters
  .has(/([\d`~\!@#\$%\^\&\*\(\)\-_\=\+\[\{\}\]\\\|;:'",<.>\/\?€£¥₹§±].*){1,}/); // Must contain at least 1 digit or symbol
// Taken from combining https://github.com/tarunbatra/password-validator/blob/40184970e4f65efa8aed7a64185a011a3b5d0e54/src/constants.js#L9
export const validateNewPassword = (password, validationText) => {
  const errors = passwordSchema.validate(password, { list: true });
  const message = getErrorMessage(errors, password, validationText);
  return message;
};
const Valid = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
  h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM4.8 9L1.8 6L2.646 5.154L4.8 7.302L9.354 2.748L10.2 3.6L4.8 9Z", fill: "#259053" })));
const Invalid = () => (h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
  h("path", { d: "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM6 10.8C3.354 10.8 1.2 8.646 1.2 6C1.2 3.354 3.354 1.2 6 1.2C8.646 1.2 10.8 3.354 10.8 6C10.8 8.646 8.646 10.8 6 10.8ZM8.754 3.348L4.8 7.302L3.246 5.754L2.4 6.6L4.8 9L9.6 4.2L8.754 3.348Z", fill: "#555555" })));
const baseItem = {
  display: "flex",
  alignItems: "center",
  fontSize: "var(--sl-font-size-small)",
  "& > :not(:last-child)": {
    "margin-right": "var(--sl-spacing-x-small)",
  },
};
const style = {
  Base: {
    fontSize: "var(--sl-font-size-small)",
  },
  ValidationList: {
    "list-style-type": "none",
    paddingRight: "var(--sl-spacing-large)",
    margin: "var(--sl-spacing-small) 0 var(--sl-spacing-x-large)",
    "& > :not(:last-child)": {
      "margin-bottom": "var(--sl-spacing-xx-small)",
    },
    "& *": {
      "line-height": "var(--sl-line-height-dense)",
    },
  },
  ValidationItemValid: {
    ...baseItem,
    color: "var(--sl-color-success-600)",
  },
  ValidationItemInvalid: { ...baseItem },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
const getErrorMessage = (errorKeys, password, validationText) => {
  const validationMessages = {
    min: validationText.minErrorText,
    uppercase: validationText.uppercaseErrorText,
    lowercase: validationText.lowercaseErrorText,
    has: validationText.hasErrorText,
  };
  if (!errorKeys.length && password)
    return (h("div", { class: sheet.classes.ValidationItemValid, style: { paddingBottom: "var(--sl-spacing-x-large)" } },
      h("style", { type: "text/css" }, styleString),
      h(Valid, null),
      " ",
      h("span", null, validationText.meetsRequirementsText)));
  return (h("div", { class: sheet.classes.Base },
    h("style", { type: "text/css" }, styleString),
    validationText.doesNotMeetRequirementsText,
    h("ul", { class: sheet.classes.ValidationList }, Object.keys(validationMessages).map((errorKey) => errorKeys.includes(errorKey) ? (h("li", { class: sheet.classes.ValidationItemInvalid },
      h(Invalid, null),
      " ",
      h("span", null, validationMessages[errorKey]))) : (h("li", { class: sheet.classes.ValidationItemValid },
      h(Valid, null),
      " ",
      h("span", null, validationMessages[errorKey])))))));
};
