import { h } from "@stencil/core";
import jss from "jss";
import preset from "jss-preset-default";
import { intl } from "../../global/global";
import { ErrorStyles } from "../../global/mixins";
const style = {
  ErrorStyle: ErrorStyles,
  FieldContainer: {
    "margin-bottom": "var(--sl-spacing-large)",
  },
};
const vanillaStyle = `
:host {
  margin: 0 auto;
  width: 100%;
  display: block;
}
`;
jss.setup(preset());
const sheet = jss.createStyleSheet(style);
const styleString = sheet.toString();
export function InputFieldView(props) {
  var _a, _b, _c, _d, _e, _f, _g;
  const { states, content } = 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-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e[content.fieldName]) ? {
      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g[content.fieldName],
    }
      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
      class: sheet.classes.ErrorStyle,
      helpText: intl.formatMessage({
        id: `errorMessage-${content.fieldName}`,
        defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
      }),
    }
      : [])))));
}
