import { Component, h, Prop, State } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
import { isDemo } from "@saasquatch/component-boilerplate";
import { getProps } from "../../utils/utils";
import { PayoutButtonScrollView, } from "./sqm-payout-button-scroll-view";
import deepmerge from "deepmerge";
import { usePayoutButton } from "./usePayoutButton";
/**
 * @uiName Payout Button Scroll
 */
export class PayoutButtonScroll {
  constructor() {
    /**
     * @uiName Payout button text
     */
    this.payoutButtonText = "Payouts & Tax Settings";
    /**
     * Description text under payout button
     * @uiName Payout button description text
     */
    this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
    this.ignored = true;
    withHooks(this);
  }
  disconnectedCallback() { }
  getTextProps() {
    return getProps(this);
  }
  render() {
    const props = isDemo()
      ? useDemoPayoutButtonScroll(this)
      : usePayoutButton(this);
    return h(PayoutButtonScrollView, Object.assign({}, props));
  }
  static get is() { return "sqm-payout-button-scroll"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "payoutButtonText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Payout button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "payout-button-text",
      "reflect": false,
      "defaultValue": "\"Payouts & Tax Settings\""
    },
    "payoutButtonDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Payout button description text",
            "name": "uiName"
          }],
        "text": "Description text under payout button"
      },
      "attribute": "payout-button-description",
      "reflect": false,
      "defaultValue": "\"Check your payout settings to see when you\u2019ll get paid out next\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<PayoutButtonScrollViewProps>",
        "resolved": "{ states?: { payoutSettingsComplete: boolean; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "PayoutButtonScrollViewProps": {
            "location": "import",
            "path": "./sqm-payout-button-scroll-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function useDemoPayoutButtonScroll(props) {
  return deepmerge({
    states: {
      payoutSettingsComplete: false,
    },
    text: props.getTextProps(),
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
