import { h } from "@stencil/core";
import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
import { createStyleSheet } from "../../styling/JSS";
import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
const style = {
  Wrapper: AuthWrapper,
  Column: AuthColumn,
  ForgotButtonContainer: {
    display: "inline",
    cursor: "pointer",
    "font-size": "13px",
    "font-weight": "600",
    color: "var(--sqm-text-subdued)",
    margin: "0",
  },
  ButtonsContainer: {
    ...AuthButtonsContainer,
    gap: "var(--sl-spacing-medium)",
    "& > *": {
      margin: "0 !important",
    },
  },
};
const vanillaStyle = `
:host {
  display: block;
}
:host([hidden]): {
  display: none;
}
`;
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export function PortalLoginView(props) {
  const { states, callbacks, content } = props;
  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    h(TextSpanView, { type: "h3" }, content.pageLabel),
    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
      props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
        h("div", { part: "erroralert-text" }, props.states.error))),
      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
      h("div", null,
        h("sl-input", { exportparts: "label: input-label, base: input-base", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
        h("div", { class: sheet.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
      h("div", { class: sheet.classes.ButtonsContainer },
        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),
        content.googleButton && h("sl-menu-divider", null),
        content.googleButton,
        content.secondaryButton))));
}
