import { Component, h, Prop, State } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
import { ChangeMarktingView, } from "./sqm-portal-change-marketing-view";
import { usePortalProfile } from "./usePortalChangeMarketing";
import { getProps } from "../../utils/utils";
import { isDemo } from "@saasquatch/component-boilerplate";
import deepmerge from "deepmerge";
/**
 * @uiName Change Marketing Opt in Status
 * @requiredFeatures ["MARKETING_EMAILS"]
 */
export class PortalChangeMarketing {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Email preferences header
     */
    this.emailPreferencesHeader = "Email preferences";
    /**
     * @uiName Marketing checkbox label
     */
    this.marketingCheckboxLabel = "I want to receive marketing emails and promotions for this referral program from impact.com";
    /**
     * @uiName Submit changes button text
     */
    this.submitChangeButtonText = "Save";
    /**
     * Displayed when the page fails to load due to a network error. The participant can try refreshing the page.
     *
     * @uiName Network request error message
     */
    this.networkRequestMessage = "An error occurred while loading this page. Please refresh the page.";
    /**
     * @uiName Successful update message
     */
    this.successMessage = "Opt-in preference has been changed.";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const props = isDemo()
      ? usePortalProfileDemo(getProps(this))
      : usePortalProfile(getProps(this));
    return h(ChangeMarktingView, Object.assign({}, props));
  }
  static get is() { return "sqm-portal-change-marketing"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "emailPreferencesHeader": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Email preferences header",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "email-preferences-header",
      "reflect": false,
      "defaultValue": "\"Email preferences\""
    },
    "marketingCheckboxLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Marketing checkbox label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "marketing-checkbox-label",
      "reflect": false,
      "defaultValue": "\"I want to receive marketing emails and promotions for this referral program from impact.com\""
    },
    "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": "\"Save\""
    },
    "networkRequestMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Network request error message",
            "name": "uiName"
          }],
        "text": "Displayed when the page fails to load due to a network error. The participant can try refreshing the page."
      },
      "attribute": "network-request-message",
      "reflect": false,
      "defaultValue": "\"An error occurred while loading this page. Please refresh the page.\""
    },
    "successMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Successful update message",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "success-message",
      "reflect": false,
      "defaultValue": "\"Opt-in preference has been changed.\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<ChangeMarketingViewProps>",
        "resolved": "{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; formState: { marketingEmailOptIn: boolean; errors: any; error: string; }; user: { id: string; accountId: string; marketingEmailOptIn: boolean; }; text: { emailPreferencesHeader: string; marketingCheckboxLabel: string; submitChangeButtonText: string; successMessage: string; }; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "ChangeMarketingViewProps": {
            "location": "import",
            "path": "./sqm-portal-change-marketing-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,
      user: {
        id: "01",
        accountId: "111100000",
        marketingEmailOptIn: false,
      },
      text: {
        emailPreferencesHeader: props.emailPreferencesHeader,
        marketingCheckboxLabel: props.marketingCheckboxLabel,
        submitChangeButtonText: props.submitChangeButtonText,
        successMessage: props.successMessage,
      },
      formState: {
        marketingEmailOptIn: false,
        errors: null,
        error: "",
      },
    },
    callbacks: {
      onSubmit: (e) => console.log(e),
      setChecked: () => { },
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
