import { Component, h, Prop, State } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
import { PortalProfileView, } from "./sqm-portal-profile-view";
import { usePortalProfile } from "./usePortalProfile";
import { getProps } from "../../utils/utils";
import { isDemo } from "@saasquatch/component-boilerplate";
import deepmerge from "deepmerge";
/**
 * @uiName Microsite Participant Profile
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
 */
export class PortalProfile {
  constructor() {
    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.";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const props = isDemo()
      ? usePortalProfileDemo(getProps(this))
      : usePortalProfile(getProps(this));
    return h(PortalProfileView, Object.assign({}, props));
  }
  static get is() { return "sqm-portal-profile"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "firstnametext": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "First name label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "firstnametext",
      "reflect": false,
      "defaultValue": "\"First Name\""
    },
    "lastnametext": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Last name field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "lastnametext",
      "reflect": false,
      "defaultValue": "\"Last Name\""
    },
    "emailtext": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Email field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "emailtext",
      "reflect": false,
      "defaultValue": "\"Email\""
    },
    "countrytext": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Country field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "countrytext",
      "reflect": false,
      "defaultValue": "\"Country\""
    },
    "editProfileHeader": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Edit profile header",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "edit-profile-header",
      "reflect": false,
      "defaultValue": "\"Edit your profile\""
    },
    "editProfileSubHeader": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Edit profile sub header",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "edit-profile-sub-header",
      "reflect": false,
      "defaultValue": "\"Personal Information\""
    },
    "submitChangeButtonText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Submit changes button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "submit-change-button-text",
      "reflect": false,
      "defaultValue": "\"Submit Changes\""
    },
    "hideCountry": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Hide country field",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "hide-country",
      "reflect": false,
      "defaultValue": "false"
    },
    "networkRequestMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Network request error message\nDisplayed when the page fails to load due to a network error. The participant can try refreshing the page.",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "network-request-message",
      "reflect": false,
      "defaultValue": "\"An error occurred while loading this page. Please refresh the page.\""
    },
    "fieldEmptyText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Field empty text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "field-empty-text",
      "reflect": false,
      "defaultValue": "\"Field is required\""
    },
    "formErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Form error message",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "form-error-text",
      "reflect": false,
      "defaultValue": "\"Please correct the errors below to update your profile.\""
    },
    "submissionSuccessText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Submission success text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "submission-success-text",
      "reflect": false,
      "defaultValue": "\"Your profile has been successfully updated.\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<PortalProfileViewProps>",
        "resolved": "{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; submissionSuccessText?: string; fieldEmptyText?: string; }; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "PortalProfileViewProps": {
            "location": "import",
            "path": "./sqm-portal-profile-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function usePortalProfileDemo(props) {
  return deepmerge({
    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 });
}
