import { r as registerInstance, h as h$1 } from './index-38ad4957.js';
import './global-96c14d63.js';
import { k as useState, f as useEffect, n as h } from './dom-context-hooks.module-50442785.js';
import { d as dist, J, w as wn, $ as $e, i as isDemo } from './index.module-b23fdad8.js';
import { c as cjs } from './cjs-bdfb4486.js';
import { g as getProps } from './utils-334c1e34.js';
import './JSS-67b5cff8.js';
import './sqm-text-span-view-72f43dff.js';
import { P as PortalProfileView } from './sqm-portal-profile-view-b5ea620f.js';
import { i as isEmpty } from './utilities-77b1e0cc.js';

const GET_USER = dist.gql `
  query {
    viewer {
      ... on User {
        id
        accountId
        firstName
        lastName
        email
        countryCode
      }
    }
  }
`;
const UPSERT_USER = dist.gql `
  mutation (
    $id: String!
    $accountId: String!
    $firstName: String!
    $lastName: String!
  ) {
    upsertUser(
      userInput: {
        id: $id
        accountId: $accountId
        firstName: $firstName
        lastName: $lastName
      }
    ) {
      firstName
      lastName
    }
  }
`;
// view doesn't tolerate undefined, even when we're loading
const defaultFormState = {
  country: "",
  email: "",
  firstName: "",
  lastName: "",
  errors: {},
  error: "",
};
function usePortalProfile(props) {
  const userIdent = J();
  const [success, setSuccess] = useState(false);
  const [userData, setUserData] = useState(undefined);
  const [formState, setFormState] = useState(defaultFormState);
  const userDataResponse = wn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
  const [upsertUser, upsertUserResponse] = $e(UPSERT_USER);
  useEffect(() => {
    if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading)
      return;
    if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) {
      setFormState((state) => {
        var _a, _b, _c;
        return ({
          ...state,
          error: (_c = (_b = (_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0].message,
        });
      });
    }
    else {
      setUserData((state) => {
        var _a;
        return ({
          ...state,
          ...(_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.data) === null || _a === void 0 ? void 0 : _a.upsertUser,
        });
      });
      if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.data)
        setSuccess(true);
    }
  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading]);
  useEffect(() => {
    var _a, _b;
    setUserData((data) => { var _a; return ({ ...data, ...(_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer }); });
    setFormState({
      ...defaultFormState,
      ...(_a = userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer,
      ...(_b = upsertUserResponse.data) === null || _b === void 0 ? void 0 : _b.upsertUser,
    });
  }, [userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data]);
  useEffect(() => {
    var _a, _b;
    if ((_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.message) {
      setFormState({
        ...(_b = userDataResponse.data) === null || _b === void 0 ? void 0 : _b.viewer,
        error: props.networkRequestMessage,
      });
    }
  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors]);
  const onSubmit = () => {
    setSuccess(false);
    if (formState.firstName && formState.lastName) {
      upsertUser({
        id: userIdent === null || userIdent === void 0 ? void 0 : userIdent.id,
        accountId: userIdent === null || userIdent === void 0 ? void 0 : userIdent.accountId,
        firstName: formState.firstName,
        lastName: formState.lastName,
      });
      setFormState((s) => ({ ...s, errors: {}, error: "" }));
      return;
    }
    const errors = {};
    if (!formState.firstName) {
      errors["firstName"] = { message: props.fieldEmptyText };
    }
    if (!formState.lastName) {
      errors["lastName"] = { message: props.fieldEmptyText };
    }
    if (!isEmpty(errors)) {
      setFormState((e) => ({
        ...e,
        error: props.formErrorText,
      }));
    }
    setFormState((e) => ({ ...e, errors }));
  };
  return {
    states: {
      success,
      loading: (userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.loading) || upsertUserResponse.loading,
      submitDisabled: false,
      showCountry: !props.hideCountry,
      formState,
      user: userData,
      text: {
        firstnametext: props.firstnametext,
        lastnametext: props.lastnametext,
        countrytext: props.countrytext,
        emailtext: props.emailtext,
        editProfileHeader: props.editProfileHeader,
        editProfileSubHeader: props.editProfileSubHeader,
        submitChangeButtonText: props.submitChangeButtonText,
      },
    },
    callbacks: {
      onSubmit,
      onChange: (e) => {
        const { name, value } = e.target;
        setFormState((data) => ({ ...data, [name]: value }));
      },
    },
  };
}

const PortalProfile = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ignored = true;
    /**
     * @uiName First name label
     */
    this.firstnametext = "First Name";
    /**
     * @uiName Last name field label
     */
    this.lastnametext = "Last Name";
    /**
     * @uiName Email field label
     */
    this.emailtext = "Email";
    /**
     * @uiName Country field label
     */
    this.countrytext = "Country";
    /**
     * @uiName Edit profile header
     */
    this.editProfileHeader = "Edit your profile";
    /**
     * @uiName Edit profile sub header
     */
    this.editProfileSubHeader = "Personal Information";
    /**
     * @uiName Submit changes button text
     */
    this.submitChangeButtonText = "Submit Changes";
    /**
     * @uiName Hide country field
     */
    this.hideCountry = false;
    /**
     * @uiName Network request error message
     * Displayed when the page fails to load due to a network error. The participant can try refreshing the page.
     */
    this.networkRequestMessage = "An error occurred while loading this page. Please refresh the page.";
    /**
     * @uiName Field empty text
     */
    this.fieldEmptyText = "Field is required";
    /**
     * @uiName Form error message
     */
    this.formErrorText = "Please correct the errors below to update your profile.";
    /**
     * @uiName Submission success text
     */
    this.submissionSuccessText = "Your profile has been successfully updated.";
    h(this);
  }
  disconnectedCallback() { }
  render() {
    const props = isDemo()
      ? usePortalProfileDemo(getProps(this))
      : usePortalProfile(getProps(this));
    return h$1(PortalProfileView, Object.assign({}, props));
  }
};
function usePortalProfileDemo(props) {
  return cjs({
    states: {
      success: false,
      loading: false,
      submitDisabled: false,
      showCountry: !props.hideCountry,
      user: {
        id: "01",
        accountId: "111100000",
        firstName: "Joe",
        lastName: "Smith",
        email: "jsmith@gmail.com",
        countryCode: "CA",
      },
      text: {
        firstnametext: props.firstnametext,
        lastnametext: props.lastnametext,
        emailtext: props.emailtext,
        countrytext: props.countrytext,
        editProfileHeader: props.editProfileHeader,
        editProfileSubHeader: props.editProfileSubHeader,
        submitChangeButtonText: props.submitChangeButtonText,
        submissionSuccessText: props.submissionSuccessText,
        fieldEmptyText: props.fieldEmptyText,
      },
      formState: {
        country: "Canada",
        firstName: "Joe",
        lastName: "Smith",
        errors: null,
        error: "",
      },
    },
    callbacks: {
      onSubmit: (e) => console.log(e),
      onChange: (e) => console.log(e),
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}

export { PortalProfile as sqm_portal_profile };
