import { h } from './index-38ad4957.js';
import { i as intl } from './global-96c14d63.js';
import { j as jss, a as create } from './JSS-67b5cff8.js';

const style = {
  ErrorStyle: {
    "&::part(control)": {
      borderColor: "var(--sl-color-danger-500)",
      outline: "var(--sl-color-danger-500)",
    },
    "&:host": {
      "--focus-ring": "0 0 0 var(--sl-focus-ring-width) red !important",
    },
  },
  ErrorMessageStyle: {
    margin: 0,
    marginTop: "5px",
    color: "var(--sl-color-danger-500)",
    fontSize: "var(--sl-input-help-text-font-size-medium)",
    fontFamily: "var(--sl-font-sans)",
    fontWeight: "var(--sl-font-weight-normal)",
  },
  FieldContainer: {
    "margin-bottom": "var(--sl-spacing-large)",
  },
};
const vanillaStyle = `
:host {
  margin: 0 auto;
  width: 100%;
  display: block;
}
sl-checkbox::part(label){
  font-size: var(--sl-input-label-font-size-small);
  font-weight: var(--sl-font-weight-normal);
  line-height: 20px;
}
sl-checkbox::part(base){
  align-items: start;
}
`;
jss.setup(create());
const sheet = jss.createStyleSheet(style);
const styleString = sheet.toString();
function LeadCheckboxFieldView(props) {
  var _a, _b, _c, _d, _e;
  const { states, content } = props;
  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
  const getRequiredFieldErrorMessage = ({ checkboxLabel, }) => intl.formatMessage({
    id: `requiredFieldErrorMessage-${checkboxLabel}`,
    defaultMessage: content.errorMessage,
  }, {
    checkboxLabel,
  });
  return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, "onSl-change": (e) => {
        e.target.value = e.target.checked;
      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
        if (!value && !content.checkboxOptional) {
          return getRequiredFieldErrorMessage({
            checkboxLabel: content.checkboxLabel,
          });
        }
      } }, (((_e = (_d = states.leadFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
      class: sheet.classes.ErrorStyle,
    }
      : [])), intl.formatMessage({
      id: content.checkboxName + "-message",
      defaultMessage: content.checkboxLabel,
    }, {
      labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
    })),
    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, getRequiredFieldErrorMessage({
      checkboxLabel: content.checkboxLabel,
    })))));
}

export { LeadCheckboxFieldView as L };
