import { h } from './index-38ad4957.js';
import { i as intl } from './global-96c14d63.js';
import { c as createStyleSheet } from './JSS-67b5cff8.js';
import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';

function PortalProfileView(props) {
  var _a, _b, _c, _d, _e;
  const { states, callbacks } = props;
  const { text, formState } = states;
  const { errors, error } = formState;
  const style = {
    Container: {
      display: "flex",
      flexDirection: "column",
      gap: "var(--sl-spacing-xxx-large)",
      padding: "var(--sl-spacing-xxx-large)",
    },
    FormStyle: {
      width: "100%",
      minWidth: "700px",
      "& >*:not(:last-child)": {
        "margin-bottom": "32px",
      },
      "@media screen and (max-width: 1100px)": {
        minWidth: "100%",
      },
    },
    Error: {
      "&::part(erroralert-base)": {
        "margin-bottom": "32px",
      },
    },
    Success: {
      "&::part(successalert-base)": {
        "margin-bottom": "32px",
      },
    },
    NameInputStyle: {
      width: "50%",
      "@media screen and (max-width: 860px)": {
        width: "100%",
        "margin-right": "0",
      },
    },
    NameInputContainer: {
      display: "flex",
      gap: "32px",
      width: "100%",
      "@media screen and (max-width: 860px)": {
        flexDirection: "column",
      },
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  const country = ((_a = states.user) === null || _a === void 0 ? void 0 : _a.countryCode) ? intl.formatDisplayName((_b = states.user) === null || _b === void 0 ? void 0 : _b.countryCode, {
    type: "region",
  })
    : "";
  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" }, styleString),
    h(TextSpanView, Object.assign({}, { type: "h1" }), text.editProfileHeader),
    h(TextSpanView, Object.assign({}, { type: "h2" }), text.editProfileSubHeader),
    h("form", { class: sheet.classes.FormStyle, onSubmit: callbacks.onSubmit },
      states.success && (h("sqm-form-message", { class: sheet.classes.Success, exportparts: "success-icon" },
        h("div", { part: "successalert-text" }, text.submissionSuccessText))),
      error && (h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
        h("div", { part: "erroralert-text" }, error))),
      h("div", { class: sheet.classes.NameInputContainer },
        h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label, base: input-base", value: (_c = states.user) === null || _c === void 0 ? void 0 : _c.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, ((errors === null || errors === void 0 ? void 0 : errors.firstName) && (errors === null || errors === void 0 ? void 0 : errors.firstName.status) !== "valid"
          ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
          : []), { id: "firstName", name: "firstName", error: (errors === null || errors === void 0 ? void 0 : errors.firstName) && (errors === null || errors === void 0 ? void 0 : errors.firstName.status) !== "valid"
            ? errors === null || errors === void 0 ? void 0 : errors.firstName.message : undefined })),
        h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label, base: input-base", value: (_d = states.user) === null || _d === void 0 ? void 0 : _d.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, ((errors === null || errors === void 0 ? void 0 : errors.lastName) && (errors === null || errors === void 0 ? void 0 : errors.lastName.status) !== "valid"
          ? { class: "ErrorStyles", helpText: text.fieldEmptyText }
          : []), { error: (errors === null || errors === void 0 ? void 0 : errors.lastName) && (errors === null || errors === void 0 ? void 0 : errors.lastName.status) !== "valid"
            ? errors === null || errors === void 0 ? void 0 : errors.lastName.message : undefined }))),
      h("sl-input", { label: text.emailtext, value: (_e = states.user) === null || _e === void 0 ? void 0 : _e.email, exportparts: "label: input-label, base: input-base", disabled: true }),
      states.showCountry && (h("sl-input", { label: text.countrytext, value: country, exportparts: "label: input-label, base: input-base", disabled: true })),
      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
          callbacks.onSubmit(e);
        }, submit: true }, text.submitChangeButtonText))));
}

export { PortalProfileView as P };
