import { h } from "@stencil/core";
import { createStyleSheet } from "../../../styling/JSS";
import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
import { ErrorStyles } from "../../../global/mixins";
import { intl } from "../../../global/global";
const style = {
  Wrapper: {
    display: "flex",
    flexDirection: "column",
    gap: "var(--sl-spacing-medium)",
    maxWidth: "550px",
  },
  HeaderContainer: {
    display: "flex",
    flexDirection: "column",
  },
  InputsContainer: {
    display: "flex",
    gap: "var(--sl-spacing-medium)",
    position: "relative",
    flexDirection: "column",
  },
  CodeInputContainer: {
    display: "flex",
    gap: "var(--sl-spacing-medium)",
  },
  CodeInput: {
    maxWidth: "40px",
    "&::part(base)": {
      borderRadius: "4px !important",
    },
    "&::part(input)": {
      margin: "0",
      padding: "0 var(--sl-input-spacing-small)",
      fontSize: "var(--sl-font-size-large)",
    },
  },
  CodeInputError: {
    ...ErrorStyles,
    maxWidth: "40px",
    "&::part(base)": {
      borderRadius: "4px !important",
    },
    "&::part(input)": {
      margin: "0",
      padding: "0 var(--sl-input-spacing-small)",
      fontSize: "var(--sl-font-size-large)",
    },
  },
  ErrorText: {
    color: "var(--sqm-danger-color-text)",
    fontSize: "var(--sl-font-size-small)",
    margin: "0",
  },
  ContinueButton: {
    width: "100%",
    maxWidth: "100px",
  },
  FooterContainer: {
    display: "flex",
    flexDirection: "column",
  },
  SkeletonOne: {
    width: "50%",
    height: "16px",
  },
  SkeletonTwo: {
    width: "30%",
    height: "34px",
  },
  SkeletonThree: {
    width: "15%",
    height: "24px",
  },
};
const vanillaStyle = `
:host {
  display: block;
}
:host([hidden]): {
  display: none;
}


`;
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export function WidgetCodeVerificationView(props) {
  const { states, refs, callbacks, text } = props;
  const resendCodeText = intl.formatMessage({
    id: "resendCodeText",
    defaultMessage: text.resendCodeText,
  }, {
    resendCodeLink: (h("a", { href: "", style: {
        textDecoration: "underline",
        color: "inherit",
        cursor: "pointer",
      }, onClick: (e) => {
        e.preventDefault();
        callbacks.resendEmail();
      } }, text.resendCodeLabel)),
  });
  const codeResentSuccessfully = intl.formatMessage({
    id: "codeResentSuccessfully",
    defaultMessage: text.codeResentSuccessfullyText,
  }, {
    email: states.email,
  });
  const inputClass = states.verifyFailed
    ? sheet.classes.CodeInputError
    : sheet.classes.CodeInput;
  return (h("div", { part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    h("div", { class: sheet.classes.Wrapper },
      h("div", { class: sheet.classes.HeaderContainer },
        h(TextSpanView, { type: "p" }, intl.formatMessage({
          id: `emailHeaderText`,
          defaultMessage: states.verifyFailed
            ? text.reverifyCodeHeaderText
            : text.verifyCodeHeaderText,
        }, { email: states.email }))),
      states.emailResent && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
        h("b", null, codeResentSuccessfully))),
      h("div", { class: sheet.classes.InputsContainer },
        h("div", { ref: refs.codeWrapperRef, class: sheet.classes.CodeInputContainer },
          h("sl-input", { class: inputClass, name: "code" }),
          h("sl-input", { class: inputClass, name: "code" }),
          h("sl-input", { class: inputClass, name: "code" }),
          h("sl-input", { class: inputClass, name: "code" }),
          h("sl-input", { class: inputClass, name: "code" }),
          h("sl-input", { class: inputClass, name: "code" })),
        states.verifyFailed && (h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
        h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
      h("div", { class: sheet.classes.FooterContainer },
        h(TextSpanView, { type: "p" }, resendCodeText)))));
}
