import { isDemo } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, Host, Prop, h } from "@stencil/core";
import deepmerge from "deepmerge";
import { getProps } from "../../../utils/utils";
import { PayoutDetailsCardView } from "./sqm-payout-details-card-view";
import { usePayoutDetailsCard } from "./usePayoutDetailsCard";
/**
 * @uiName Payout Details Card
 * @exampleGroup Tax and Cash Components
 */
export class PayoutDetailsCard {
  constructor() {
    /**
     * Badge text indicating payout status
     * @uiName Payout badge status text
     */
    this.statusBadgeText = "{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} other {Failed}}";
    /**
     * Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid.
     * @uiName Payout schedule by threshold text
     */
    this.thresholdPayoutText = "Next payout occurs when balance is {thresholdBalance}";
    /**
     * Shown before the participant’s bank account information.
     * @uiName Bank account field label
     */
    this.accountText = "Account";
    /**
     * Text displayed for existing publishers that do not have saved banking information.
     * @uiName Payout missing information subtext
     */
    this.payoutMissingInformationText = "Missing banking information, go to Impact.com to resolve.";
    /**
     * @componentState { "title": "Loading", "props": { "states": { "loading": true } } }
     */
    this.stateController = "{}";
    withHooks(this);
  }
  disconnectedCallback() { }
  getTextProps() {
    const props = getProps(this);
    return {
      ...props,
    };
  }
  render() {
    const props = isDemo()
      ? useDemoPayoutDetailsCard(this)
      : usePayoutDetailsCard(this);
    return (h(Host, null,
      h(PayoutDetailsCardView, { text: props.text, states: props.states })));
  }
  static get is() { return "sqm-payout-details-card"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "statusBadgeText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Payout badge status text",
            "name": "uiName"
          }],
        "text": "Badge text indicating payout status"
      },
      "attribute": "status-badge-text",
      "reflect": false,
      "defaultValue": "\"{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} other {Failed}}\""
    },
    "thresholdPayoutText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Payout schedule by threshold text",
            "name": "uiName"
          }],
        "text": "Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid."
      },
      "attribute": "threshold-payout-text",
      "reflect": false,
      "defaultValue": "\"Next payout occurs when balance is {thresholdBalance}\""
    },
    "accountText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Bank account field label",
            "name": "uiName"
          }],
        "text": "Shown before the participant\u2019s bank account information."
      },
      "attribute": "account-text",
      "reflect": false,
      "defaultValue": "\"Account\""
    },
    "payoutMissingInformationText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Payout missing information subtext",
            "name": "uiName"
          }],
        "text": "Text displayed for existing publishers that do not have saved banking information."
      },
      "attribute": "payout-missing-information-text",
      "reflect": false,
      "defaultValue": "\"Missing banking information, go to Impact.com to resolve.\""
    },
    "stateController": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "{ \"title\": \"Loading\", \"props\": { \"states\": { \"loading\": true } } }",
            "name": "componentState"
          }],
        "text": ""
      },
      "attribute": "state-controller",
      "reflect": false,
      "defaultValue": "\"{}\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<any>",
        "resolved": "{ [x: string]: any; [x: number]: any; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../../global/demo"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }],
        "text": ""
      }
    }
  }; }
}
function useDemoPayoutDetailsCard(props) {
  return deepmerge({
    states: {
      loading: false,
      error: false,
      thresholdBalance: "$50",
      mainCurrency: { currencyText: "USD", amountText: "100.00" },
      badgeStatus: "nextPayout",
      payoutType: "BANK_TRANSFER",
      nextPayoutDate: "March 14, 2024",
      paypalEmailAddress: "joesmith@example.com",
      otherCurrencies: false,
      hasW9Pending: false,
      hasDatePending: true,
      cardNumberPreview: "XX2381",
      balance: "20.00 USD",
    },
    text: props.getTextProps(),
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
