import { isDemo } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, Prop, h } from "@stencil/core";
import deepmerge from "deepmerge";
import { getProps } from "../../utils/utils";
import { ReferralCodesView, } from "./sqm-referral-codes-view";
import { useReferralCodes } from "./useReferralCodes";
/**
 * @uiName Promo Codes
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span","sqb-program-section","sqb-conditional-section"]
 * @slots [{"name":"", "title":"Promo Codes Content"}]
 * @exampleGroup Sharing
 * @example Promo Codes - <sqm-referral-codes><sqm-pagination slot="pagination"></sqm-pagination><sqm-referral-code slot="shareCodes" show-notification-text="true"></sqm-referral-code><sqm-portal-container gap="small" slot="shareButtons"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="fbmessenger">Share on Facebook</sqm-share-button><sqm-share-button medium="whatsapp">Share on WhatsApp</sqm-share-button></sqm-portal-container></sqm-referral-codes>
 */
export class ReferralCodes {
  constructor() {
    /**
     * @uiName Title Text
     */
    this.titleText = "Start sharing";
    /**
     * @uiName Empty State Header Text
     */
    this.emptyStateHeaderText = "Your new codes and links aren’t ready yet";
    /**
     * @uiName Empty State Description Text
     */
    this.emptyStateDescriptionText = "Please contact our program support team to let them know you’re out of codes.";
    /**
     * @uiName Empty State Image URL
     */
    this.emptyStateImageUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const thisProps = getProps(this);
    const props = isDemo()
      ? useDemoReferralCodes(thisProps)
      : useReferralCodes(thisProps);
    const slots = {
      shareButtons: h("slot", { name: "shareButtons" }),
      shareCodes: h("slot", { name: "shareCodes" }),
      pagination: h("slot", { name: "pagination" }),
      empty: (h(EmptySlot, { headerText: this.emptyStateHeaderText, descriptionText: this.emptyStateDescriptionText, imageUrl: this.emptyStateImageUrl })),
      loading: h(LoadingSlot, null),
    };
    const viewProps = {
      slots,
      ...props,
      loading: props.states.loading,
      noCodes: props.states.noCodes,
    };
    return h(ReferralCodesView, Object.assign({}, viewProps));
  }
  static get is() { return "sqm-referral-codes"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "titleText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Title Text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "title-text",
      "reflect": false,
      "defaultValue": "\"Start sharing\""
    },
    "textColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Text Color",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "color",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "text-color",
      "reflect": false
    },
    "emptyStateHeaderText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Empty State Header Text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "empty-state-header-text",
      "reflect": false,
      "defaultValue": "\"Your new codes and links aren\u2019t ready yet\""
    },
    "emptyStateDescriptionText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Empty State Description Text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "empty-state-description-text",
      "reflect": false,
      "defaultValue": "\"Please contact our program support team to let them know you\u2019re out of codes.\""
    },
    "emptyStateImageUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Empty State Image URL",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "empty-state-image-url",
      "reflect": false,
      "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png\""
    },
    "programId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Program ID",
            "name": "uiName"
          }, {
            "text": "programSelector",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "program-id",
      "reflect": false
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<ReferralCodesViewProps>",
        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; textColor?: string; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "ReferralCodesViewProps": {
            "location": "import",
            "path": "./sqm-referral-codes-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
}
function EmptySlot({ headerText, descriptionText, imageUrl, }) {
  return (h("slot", { name: "empty" },
    h("sqm-empty", { emptyStateHeader: headerText, emptyStateText: descriptionText, emptyStateImage: imageUrl })));
}
function LoadingSlot() {
  return (h("slot", { name: "loading" },
    h(LoadingRow, null),
    h(LoadingRow, null),
    h(LoadingRow, null),
    h(LoadingRow, null)));
}
function LoadingRow() {
  return h("sqm-skeleton", null);
}
function useDemoReferralCodes(props) {
  return deepmerge({
    titleText: props.titleText,
    textColor: props.textColor,
    states: {
      noCodes: false,
      loading: false,
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
