import { Component, h, Prop, State } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
import EditProfileView from "./sqm-edit-profile-view";
import { useEditProfile } from "./useEditProfile";
import { isDemo } from "@saasquatch/component-boilerplate";
import { getProps } from "../../utils/utils";
import deepmerge from "deepmerge";
/**
 * @uiName Microsite Edit Profile
 */
export class EditProfile {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Network error message
     */
    this.networkErrorMessage = "Network request failed.";
    /**
     * @uiName Empty field error message
     */
    this.fieldEmptyText = "Cannot be empty";
    /**
     * @uiName Form error message
     */
    this.formErrorText = "Please correct the errors below to update your profile.";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const props = isDemo()
      ? useEditProfileDemo(getProps(this))
      : useEditProfile(getProps(this));
    return h(EditProfileView, Object.assign({}, props));
  }
  static get is() { return "sqm-edit-profile"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sqm-edit-profile.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sqm-edit-profile.css"]
  }; }
  static get properties() { return {
    "editprofileheader": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Heading",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "editprofileheader",
      "reflect": false
    },
    "editprofiletext": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Edit profile text",
            "name": "uiName"
          }],
        "text": "Enable editing button text"
      },
      "attribute": "editprofiletext",
      "reflect": false
    },
    "canceltext": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Cancel button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "canceltext",
      "reflect": false
    },
    "updatetext": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Info button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "updatetext",
      "reflect": false
    },
    "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
    },
    "lastnametext": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Last name label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "lastnametext",
      "reflect": false
    },
    "currentregiontext": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Region field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "currentregiontext",
      "reflect": false
    },
    "showregion": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Show region",
            "name": "uiName"
          }],
        "text": "Show or hide current region"
      },
      "attribute": "showregion",
      "reflect": false
    },
    "networkErrorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Network error message",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "network-error-message",
      "reflect": false,
      "defaultValue": "\"Network request failed.\""
    },
    "fieldEmptyText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Empty field error message",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "field-empty-text",
      "reflect": false,
      "defaultValue": "\"Cannot be empty\""
    },
    "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.\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<EditProfileViewProps>",
        "resolved": "{ states?: { loading: boolean; submitDisabled: boolean; formState: { currentRegion: string; firstName: string; lastName: string; errors: any; error: string; }; user: { firstName: string; lastName: string; email: string; }; showEdit: boolean; text: { editprofileheader: string; editprofiletext: string; firstnametext: string; lastnametext: string; canceltext: string; updatetext: string; currentregiontext: string; fieldEmptyText?: string; showregion?: boolean; }; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "EditProfileViewProps": {
            "location": "import",
            "path": "./sqm-edit-profile-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function useEditProfileDemo(props) {
  return deepmerge({
    states: {
      loading: false,
      submitDisabled: false,
      formState: {
        currentRegion: "Canada",
        firstName: "Bill",
        lastName: "Bob",
        errors: {},
        error: "An error string",
      },
      user: {
        firstName: "Bill",
        lastName: "Bob",
        email: "billbob@example.com",
      },
      showEdit: false,
      text: {
        editprofileheader: props.editprofileheader
          ? props.editprofileheader
          : "Edit Profile",
        editprofiletext: props.editprofiletext
          ? props.editprofiletext
          : "Update your profile.",
        firstnametext: props.firstnametext
          ? props.firstnametext
          : "First Name",
        lastnametext: props.lastnametext ? props.lastnametext : "Last Name",
        canceltext: props.canceltext ? props.canceltext : "Cancel",
        updatetext: props.updatetext ? props.updatetext : "Update",
        currentregiontext: props.currentregiontext
          ? props.currentregiontext
          : "Region",
        showregion: true,
        fieldEmptyText: props.fieldEmptyText,
      },
    },
    callbacks: {
      onSubmit: (props) => {
        console.log(props);
      },
      resetForm: () => {
        console.log("reset");
      },
      onChange: () => {
        console.log("change");
      },
      setShowEdit: (props) => {
        console.log(props);
      },
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
