import { h } from "@stencil/core";
import { ErrorStyles } from "../../global/mixins";
import { createStyleSheet } from "../../styling/JSS";
const style = {
  ErrorStyle: ErrorStyles,
  FieldsContainer: {
    "& sl-input": {
      "margin-bottom": "var(--sl-spacing-large)",
    },
  },
};
const vanillaStyle = `
:host {
  margin: 0 auto;
  width: 100%;
  display: block;
}

*::part(input-label), *::part(select-label), *::part(textarea-label){
  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
  font-weight: var(--sl-font-weight-semibold);
  color: var(--sqm-input-label-color, var(--sqm-text), black);
}

*::part(input-base), *::part(select-base), *::part(textarea-base){
  background-color: var(--sqm-input-background, #fff);
  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
  color: var(--sqm-input-color, white);
  border-width: var(--sqm-border-thickness, 1px);
}

sl-input::part(base):focus,
sl-select::part(form-control-wrapper):focus,
sl-textare::part(textarea-label):focus {
  border-color: none;
  border: var(--sqm-input-focus-border, var(--sqm-border-thickness) solid var(--sl-input-border-color-focus));
}

*::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{
  background: var(--sqm-input-disabled-background, #f5f5f5);
  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
}

sl-input {
  --sl-input-border-color-focus: var(--sqm-border-color-focus); 
}

`;
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export function NameFieldsView(props) {
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
  const { states } = 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.FieldsContainer },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: !states.optional, 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.firstName) ? {
      value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
    }
      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
      class: sheet.classes.ErrorStyle,
      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
    }
      : []))),
    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: !states.optional, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
      value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
    }
      : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {
      class: sheet.classes.ErrorStyle,
      helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) || "Cannot be empty",
    }
      : [])))));
}
