'use strict';

const index = require('./index-8277cbb3.js');
const global = require('./global-b7b1b8fe.js');
const JSS = require('./JSS-8503a151.js');
const mixins = require('./mixins-4761d472.js');
const sqmTextSpanView = require('./sqm-text-span-view-b9e10f5d.js');

const style = {
  Wrapper: mixins.AuthWrapper,
  Column: { ...mixins.AuthColumn },
  ButtonLink: {
    fontSize: "14px",
    color: "var(--sl-color-primary-500)",
    display: "inline-block !important",
    "&:hover": {
      cursor: "pointer",
      textDecoration: "underline",
    },
  },
  ButtonLinkLoading: {
    fontSize: "14px",
    color: "var(--sqm-text-subdued)",
    opacity: "0.6",
    display: "inline-block !important",
    textDecoration: "underline",
    "&:hover": {
      cursor: "not-allowed",
    },
  },
};
const vanillaStyle = `
:host {
  display: block;
}
:host([hidden]): {
  display: none;
}
`;
const sheet = JSS.createStyleSheet(style);
const styleString = sheet.toString();
function PortalEmailVerificationView(props) {
  const { states, callbacks, content: { email, verifyMessage, emailVerificationHeader, resendEmailButtonText, verificationStatusMessage, verificationLoadingMessage, verificationResentMessage, }, } = props;
  return (index.h("div", { class: sheet.classes.Wrapper },
    index.h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, emailVerificationHeader),
    index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
      props.states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
        index.h("div", { part: "erroralert-text" }, props.states.error))),
      props.states.success && (index.h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
        index.h("div", { part: "successalert-text" }, verificationResentMessage))),
      index.h(sqmTextSpanView.TextSpanView, { type: "p" }, global.intl.formatMessage({
        id: "verifyMessage",
        defaultMessage: verifyMessage,
      }, {
        email: (index.h("span", { style: { fontWeight: "var(--sl-font-weight-semibold)" } }, email)),
      })),
      index.h("p", { style: { color: "var(--sqm-text-subdued)", fontSize: "14px" } }, global.intl.formatMessage({
        id: `verificationStatus`,
        defaultMessage: states.loadingVerification
          ? verificationLoadingMessage + " {countdown}"
          : verificationStatusMessage,
      }, {
        countdown: states.loadingVerification ? (index.h("sl-spinner", null)) : (states.countdown),
      })),
      index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.submit, loading: states.loading }, resendEmailButtonText))));
}

exports.PortalEmailVerificationView = PortalEmailVerificationView;
