import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { PortalContainerView } from "../sqm-portal-container/sqm-portal-container-view";
import { PortalSectionView } from "../sqm-titled-section/sqm-portal-section-view";
import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
export function PortalChangePasswordView(props) {
  const { states, callbacks } = props;
  const style = {
    Dialog: {
      padding: "0",
      "&::part(panel)": {
        background: "var(--sqm-portal-background)",
        borderRadius: "var(--sqm-border-radius-normal, var(--sl-border-radius-medium))",
      },
      "&::part(close-button)": {
        "margin-top": "var(--sl-spacing-medium)",
      },
      "&::part(body)": {
        padding: "0 var(--sl-spacing-x-large) var(--sl-spacing-x-large) var(--sl-spacing-x-large)",
      },
    },
    Error: {
      "&::part(erroralert-base)": {
        "margin-bottom": "15px",
      },
    },
    Success: {
      "&::part(successalert-base)": {
        "margin-bottom": "15px",
      },
    },
    InputContainer: {
      "& > :not(:last-child)": {
        "margin-bottom": "var(--sl-spacing-x-large)",
      },
    },
    CancelButton: {
      margin: "var(--sl-spacing-large) auto",
      width: "100%",
    },
    PasswordField: {
      marginBottom: "var(--sl-spacing-large) !important",
      display: "block",
    },
    ChangePasswordButton: {
      paddingTop: "var(--sl-spacing-x-large)",
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", null,
    h("style", { type: "text/css" }, styleString),
    h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, "onSl-hide": () => callbacks.setOpen(false) },
      h(PortalSectionView, Object.assign({}, {
        labelMargin: "x-large",
        padding: "none",
        label: (h(TextSpanView, Object.assign({}, { type: "h2" }), states.content.modalChangePasswordHeader)),
        content: (h(PortalContainerView, Object.assign({}, { direction: "column", padding: "none", gap: "32px" }),
          states.error && (h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
            h("div", { part: "erroralert-text" }, states.error))),
          states.success && (h("sqm-form-message", { class: sheet.classes.Success, type: "success", exportparts: "successalert-icon" },
            h("div", { part: "successalert-text" }, states.content.successMessage))),
          h("sl-form", { "onSl-submit": callbacks.submit },
            h("div", { class: sheet.classes.InputContainer },
              h("sqm-password-field", { exportparts: "input-label: input-label", class: sheet.classes.PasswordField, fieldLabel: states.content.passwordFieldLabel, meetsRequirementsText: states.content.meetsRequirementsText, doesNotMeetRequirementsText: states.content.doesNotMeetRequirementsText, minErrorText: states.content.minErrorText, uppercaseErrorText: states.content.uppercaseErrorText, lowercaseErrorText: states.content.lowercaseErrorText, hasErrorText: states.content.hasErrorText }),
              h("sl-input", { exportparts: "label: input-label, base: input-base", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, required: true, togglePassword: true, disabled: states.loading, type: "password" })),
            h(PortalContainerView, Object.assign({}, { direction: "row", padding: "none", gap: "20px" }),
              h("sl-button", { class: sheet.classes.ChangePasswordButton, type: "primary", exportparts: "base: primarybutton-base", submit: true, loading: states.loading }, states.content.changePasswordButtonText),
              h("sl-button", { class: sheet.classes.CancelButton, type: "secondary", exportparts: "base: secondarybutton-base", onClick: () => callbacks.setOpen(false) }, states.content.cancelText))))),
      }))),
    h(PortalSectionView, Object.assign({}, {
      labelMargin: "x-large",
      padding: "xxx-large",
      label: (h(TextSpanView, Object.assign({}, { type: "h2" }), states.content.portalChangePasswordHeader)),
      content: (h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => callbacks.setOpen(true) }, states.content.portalChangePasswordButtonText)),
    }),
      h("style", { type: "text/css" }, styleString))));
}
