import { h } from "@stencil/core";
import jss from "jss";
import preset from "jss-preset-default";
import { intl } from "../../global/global";
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;
}
sl-checkbox[checked]::part(control){
  background-color: var(--sqm-input-border-color-focus);
}

sl-checkbox[checked]::part(checked-icon){
  color: var(--sqm-input-background);
}
`;
jss.setup(preset());
const sheet = jss.createStyleSheet(style);
const styleString = sheet.toString();
export function CheckboxFieldView(props) {
  var _a, _b, _c, _d, _e;
  const { states, content, callbacks } = props;
  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
  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}`, checked: states.checked, "onSl-change": (e) => {
        e.target.value = e.target.checked;
        callbacks.setChecked(e.target.value);
      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
        if (!value && !content.checkboxOptional) {
          return content.errorMessage;
        }
      } }, (((_e = (_d = states.registrationFormState) === 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 }, content.errorMessage))));
}
