import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { CheckboxFieldView } from "../sqm-checkbox-field/sqm-checkbox-field-view";
import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
export function ChangeMarktingView(props) {
  const { states, callbacks } = props;
  const { text, formState } = states;
  const { error } = formState;
  const style = {
    Container: {
      display: "flex",
      flexDirection: "column",
      gap: "var(--sl-spacing-x-small)",
      padding: "0 var(--sl-spacing-xxx-large) var(--sl-spacing-xxx-large)",
    },
    SubmitButton: { marginBottom: "var(--sl-spacing-medium)" },
    Error: {
      "&::part(erroralert-base)": {
        "margin-bottom": "15px",
      },
    },
    Success: {
      "&::part(successalert-base)": {
        "margin-bottom": "15px",
      },
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" }, styleString),
    h(TextSpanView, Object.assign({}, { type: "h2" }), text.emailPreferencesHeader),
    h("sl-form", { "onSl-submit": callbacks.onSubmit },
      h(CheckboxFieldView, { states: {
          checked: states.formState.marketingEmailOptIn,
        }, content: {
          checkboxLabel: text.marketingCheckboxLabel,
          checkboxName: "marketingEmailOptIn",
        }, callbacks: {
          setChecked: callbacks.setChecked,
        } }),
      h("sl-button", { class: sheet.classes.SubmitButton, type: "primary", submit: true, loading: states.loading, disabled: states.submitDisabled }, text.submitChangeButtonText),
      error && (h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
        h("div", { part: "erroralert-text" }, error))),
      states.success && (h("sqm-form-message", { class: sheet.classes.Success, type: "success", exportparts: "successalert-icon" },
        h("div", { part: "successalert-text" }, states.text.successMessage))))));
}
