import { isDemo } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Host, Prop, State } from "@stencil/core";
import deepmerge from "deepmerge";
import { parseStates } from "../../utils/parseStates";
import { getProps } from "../../utils/utils";
import { demoRewardExchange } from "./RewardExchangeListData";
import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
import { useRewardExchangeList, } from "./useRewardExchangeList";
/**
 * @uiName Reward Exchange
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
 * @validChildren ["sqm-empty"]
 * @slots [{"name":"empty", "title":"Empty State"}]
 * @exampleGroup Rewards
 * @example Reward Exchange - <sqm-reward-exchange-list not-available-error="{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }" choose-reward-title="Rewards" choose-amount-title="Select" confirmation-title="Confirm" reward-title="Choose a reward" cancel-text="Cancel" back-text="Back" continue-text="Continue" continue-to-confirmation-text="Continue to confirmation" redeem-text="Redeem" redeem-title="Confirm and redeem" redemption-success-text="Redeemed {sourceValue} for {destinationValue}" source-amount-message="{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}" tooltip-text="Copied" done-text="Done" select-text="Select amount to receive" query-error="Unable to load reward exchange list. Please try again" redemption-error="An error occured trying to redeem this reward. Please try again" not-enough-error="Not enough {sourceUnit} to redeem for this reward" reward-redeemed-text="Reward redeemed" promo-code="Promo Code" skeleton-card-num=8 reward-name-title="Reward" reward-amount-title="Reward Amount" cost-title="Cost to Redeem"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png" empty-state-header="Redeem rewards" empty-state-text="Use your points to redeem rewards once they become available" slot="empty"></sqm-empty></sqm-reward-exchange-list>
 */
export class SqmRewardExchangeList {
  constructor() {
    this.ignored = true;
    /**
     * Error message shown when reward is not available
     *
     * @uiName Not available error
     * @uiWidget textArea
     */
    this.notAvailableError = "{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }";
    /**
     * @uiName Choose reward progress title
     */
    this.chooseRewardTitle = "Rewards";
    /**
     * @uiName Choose amount progress title
     */
    this.chooseAmountTitle = "Select";
    /**
     * @uiName Confirmation progress title
     */
    this.confirmationTitle = "Confirm";
    /**
     * @uiName Reward title text
     */
    this.rewardTitle = "Choose a reward";
    /**
     * @uiName Cancel button text
     */
    this.cancelText = "Cancel";
    /**
     * @uiName Back button text
     */
    this.backText = "Back";
    /**
     * @uiName Continue button text
     */
    this.continueText = "Continue";
    /**
     * Displayed on the reward selection page.
     * @uiName Continue to confirmation button text
     */
    this.continueToConfirmationText = "Continue to confirmation";
    /**
     * @uiName Redeem button text
     */
    this.redeemText = "Redeem";
    /**
     * Displayed as the header for the confirmation page.
     *
     * @uiName Confirmation title text
     */
    this.redeemTitle = "Confirm and redeem";
    /**
     * Displayed on the success screen when a user successfully exchanges for a reward.
     *
     * @uiName Redemption success message
     * @uiWidget textArea
     */
    this.redemptionSuccessText = "Redeemed {sourceValue} for {destinationValue}";
    /**
     * Displayed on the reward exchange cards.
     *
     * @uiName Reward exchange amount text
     * @uiWidget textArea
     */
    this.sourceAmountMessage = "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}";
    /**
     * Shown when a user copies a fuel tank code
     *
     * @uiName Tooltip text
     */
    this.tooltipText = "Copied";
    /**
     * @uiName Done text
     */
    this.doneText = "Done";
    /**
     * @uiName Select amount text
     * @uiWidget textArea
     */
    this.selectText = "Select amount to receive";
    /**
     * Shown if an error occurs when loading the reward exchange.
     *
     * @uiName Reward list error message
     * @uiWidget textArea
     */
    this.queryError = "Unable to load reward exchange list. Please try again";
    /**
     * Shown if an error occurs during the reward exchange.
     *
     * @uiName Redemption error message
     * @uiWidget textArea
     */
    this.redemptionError = "An error occured trying to redeem this reward. Please try again";
    /**
     * @uiName Not enough error message
     * @uiWidget textArea
     */
    this.notEnoughError = "Not enough {sourceUnit} to redeem for this reward";
    /**
     * @uiName Reward redeemed text
     */
    this.rewardRedeemedText = "Reward redeemed";
    /**
     * @uiName Promo code text
     */
    this.promoCode = "Promo Code";
    /**
     * Set the number of placeholder cards to be shown in loading state.
     *
     * @uiName Loading cards
     */
    this.skeletonCardNum = 8;
    /**
     * Shown in the confirmation state.
     *
     * @uiName Reward row title
     */
    this.rewardNameTitle = "Reward";
    /**
     * Shown in the confirmation state.
     *
     * @uiName Reward amount row title
     */
    this.rewardAmountTitle = "Reward Amount";
    /**
     * Shown in the confirmation state.
     *
     * @uiName Cost row title
     */
    this.costTitle = "Cost to Redeem";
    /**
     * @componentState { "title": "Choose reward", "props": { "states": { "redeemStage": "chooseReward" } }, "dependencies": ["sqm-reward-exchange-list"] }
     * @componentState { "title": "Reward details", "props": { "states": { "redeemStage": "chooseAmount" } }, "dependencies": ["sqm-reward-exchange-list"] }
     * @componentState { "title": "Confirm exchange", "props": { "states": { "redeemStage": "confirmation" } }, "dependencies": ["sqm-reward-exchange-list"] }
     * @componentState { "title": "Exchange successful", "props": { "states": { "redeemStage": "success" } }, "dependencies": ["sqm-reward-exchange-list"] }
     */
    this.stateController = "{}";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const props = {
      ...getProps(this),
      empty: h(EmptySlot, null),
    };
    const { states, data, callbacks, refs } = isDemo()
      ? useRewardExchangeListDemo(props)
      : useRewardExchangeList(props);
    return (h(Host, { style: { display: "contents" } },
      h(RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
  }
  static get is() { return "sqm-reward-exchange-list"; }
  static get encapsulation() { return "shadow"; }
  static get assetsDirs() { return ["assets"]; }
  static get properties() { return {
    "notAvailableError": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Not available error",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Error message shown when reward is not available"
      },
      "attribute": "not-available-error",
      "reflect": false,
      "defaultValue": "\"{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }\""
    },
    "chooseRewardTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Choose reward progress title",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "choose-reward-title",
      "reflect": false,
      "defaultValue": "\"Rewards\""
    },
    "chooseAmountTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Choose amount progress title",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "choose-amount-title",
      "reflect": false,
      "defaultValue": "\"Select\""
    },
    "confirmationTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Confirmation progress title",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "confirmation-title",
      "reflect": false,
      "defaultValue": "\"Confirm\""
    },
    "rewardTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Reward title text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "reward-title",
      "reflect": false,
      "defaultValue": "\"Choose a reward\""
    },
    "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": "cancel-text",
      "reflect": false,
      "defaultValue": "\"Cancel\""
    },
    "backText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Back button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "back-text",
      "reflect": false,
      "defaultValue": "\"Back\""
    },
    "continueText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Continue button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "continue-text",
      "reflect": false,
      "defaultValue": "\"Continue\""
    },
    "continueToConfirmationText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Continue to confirmation button text",
            "name": "uiName"
          }],
        "text": "Displayed on the reward selection page."
      },
      "attribute": "continue-to-confirmation-text",
      "reflect": false,
      "defaultValue": "\"Continue to confirmation\""
    },
    "redeemText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Redeem button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "redeem-text",
      "reflect": false,
      "defaultValue": "\"Redeem\""
    },
    "redeemTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Confirmation title text",
            "name": "uiName"
          }],
        "text": "Displayed as the header for the confirmation page."
      },
      "attribute": "redeem-title",
      "reflect": false,
      "defaultValue": "\"Confirm and redeem\""
    },
    "redemptionSuccessText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Redemption success message",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Displayed on the success screen when a user successfully exchanges for a reward."
      },
      "attribute": "redemption-success-text",
      "reflect": false,
      "defaultValue": "\"Redeemed {sourceValue} for {destinationValue}\""
    },
    "sourceAmountMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Reward exchange amount text",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Displayed on the reward exchange cards."
      },
      "attribute": "source-amount-message",
      "reflect": false,
      "defaultValue": "\"{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}\""
    },
    "tooltipText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Tooltip text",
            "name": "uiName"
          }],
        "text": "Shown when a user copies a fuel tank code"
      },
      "attribute": "tooltip-text",
      "reflect": false,
      "defaultValue": "\"Copied\""
    },
    "doneText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Done text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "done-text",
      "reflect": false,
      "defaultValue": "\"Done\""
    },
    "selectText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Select amount text",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "select-text",
      "reflect": false,
      "defaultValue": "\"Select amount to receive\""
    },
    "queryError": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Reward list error message",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Shown if an error occurs when loading the reward exchange."
      },
      "attribute": "query-error",
      "reflect": false,
      "defaultValue": "\"Unable to load reward exchange list. Please try again\""
    },
    "redemptionError": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Redemption error message",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Shown if an error occurs during the reward exchange."
      },
      "attribute": "redemption-error",
      "reflect": false,
      "defaultValue": "\"An error occured trying to redeem this reward. Please try again\""
    },
    "notEnoughError": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Not enough error message",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "not-enough-error",
      "reflect": false,
      "defaultValue": "\"Not enough {sourceUnit} to redeem for this reward\""
    },
    "rewardRedeemedText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Reward redeemed text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "reward-redeemed-text",
      "reflect": false,
      "defaultValue": "\"Reward redeemed\""
    },
    "promoCode": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Promo code text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "promo-code",
      "reflect": false,
      "defaultValue": "\"Promo Code\""
    },
    "skeletonCardNum": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Loading cards",
            "name": "uiName"
          }],
        "text": "Set the number of placeholder cards to be shown in loading state."
      },
      "attribute": "skeleton-card-num",
      "reflect": false,
      "defaultValue": "8"
    },
    "rewardNameTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Reward row title",
            "name": "uiName"
          }],
        "text": "Shown in the confirmation state."
      },
      "attribute": "reward-name-title",
      "reflect": false,
      "defaultValue": "\"Reward\""
    },
    "rewardAmountTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Reward amount row title",
            "name": "uiName"
          }],
        "text": "Shown in the confirmation state."
      },
      "attribute": "reward-amount-title",
      "reflect": false,
      "defaultValue": "\"Reward Amount\""
    },
    "costTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Cost row title",
            "name": "uiName"
          }],
        "text": "Shown in the confirmation state."
      },
      "attribute": "cost-title",
      "reflect": false,
      "defaultValue": "\"Cost to Redeem\""
    },
    "stateController": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "{ \"title\": \"Choose reward\", \"props\": { \"states\": { \"redeemStage\": \"chooseReward\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
            "name": "componentState"
          }, {
            "text": "{ \"title\": \"Reward details\", \"props\": { \"states\": { \"redeemStage\": \"chooseAmount\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
            "name": "componentState"
          }, {
            "text": "{ \"title\": \"Confirm exchange\", \"props\": { \"states\": { \"redeemStage\": \"confirmation\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
            "name": "componentState"
          }, {
            "text": "{ \"title\": \"Exchange successful\", \"props\": { \"states\": { \"redeemStage\": \"success\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
            "name": "componentState"
          }],
        "text": ""
      },
      "attribute": "state-controller",
      "reflect": false,
      "defaultValue": "\"{}\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<RewardExchangeViewProps>",
        "resolved": "{ states?: { selectedItem: ExchangeItem; selectedStep: ExchangeStep; redeemStage: string; amount: number; exchangeError: boolean; queryError: boolean; loading: boolean; open: boolean; noExchangeOptions: boolean; content: { text: TextContent; }; }; refs?: { canvasRef: any; }; data?: { exchangeList: any; fuelTankCode?: string; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "RewardExchangeViewProps": {
            "location": "import",
            "path": "./sqm-reward-exchange-list-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function EmptySlot() {
  return (h("slot", { name: "empty" },
    h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })));
}
function useRewardExchangeListDemo(props) {
  const states = parseStates(props.stateController);
  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
    ? { ...prev, ...states[key] }
    : { ...prev, [`${key}_stateController`]: states[key] }, {});
  const finalProps = deepmerge({ ...demoRewardExchange, content: { text: props } }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
  return finalProps;
}
