import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, Prop, h } from "@stencil/core";
import { isDemo } from "@saasquatch/component-boilerplate";
import { LeaderboardRankView, } from "./sqm-leaderboard-rank-view";
import { useLeaderboardRank } from "./useLeaderboardRank";
import deepmerge from "deepmerge";
import { intl } from "../../global/global";
/**
 * @uiName Leaderboard Rank
 */
export class LeaderboardRank {
  constructor() {
    /**
     * @uiName Rank text
     * @uiWidget textArea
     */
    this.rankText = "You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const props = isDemo()
      ? useLeaderboardRankDemo(this)
      : useLeaderboardRank(this);
    return h(LeaderboardRankView, Object.assign({}, props));
  }
  static get is() { return "sqm-leaderboard-rank"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sqm-leaderboard-rank.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sqm-leaderboard-rank.css"]
  }; }
  static get properties() { return {
    "rankType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"rowNumber\" | \"rank\" | \"denseRank\"",
        "resolved": "\"denseRank\" | \"rank\" | \"rowNumber\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Default rank",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"rowNumber\", \"rank\", \"denseRank\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Row Number\", \"Rank\", \"Dense Rank\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "rank-type",
      "reflect": false
    },
    "rankText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Rank text",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "rank-text",
      "reflect": false,
      "defaultValue": "\"You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!\""
    },
    "leaderboardType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "| \"topStartedReferrers\"\n    | \"topConvertedReferrers\"\n    | \"topPointEarners\"",
        "resolved": "\"topConvertedReferrers\" | \"topPointEarners\" | \"topStartedReferrers\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Leaderboard type",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": undefined,
            "name": "required"
          }, {
            "text": "[\"topStartedReferrers\", \"topConvertedReferrers\", \"topPointEarners\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Top Started Referrers\", \"Top Converted Referrers\", \"Top Point Earners\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "leaderboard-type",
      "reflect": false
    },
    "unrankedText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Unranked text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "unranked-text",
      "reflect": false
    },
    "interval": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Leaderboard time interval",
            "name": "uiName"
          }, {
            "text": "dateRange",
            "name": "uiWidget"
          }, {
            "text": "{\"allowPastDates\":true, \"months\": 1}",
            "name": "uiWidgetOptions"
          }],
        "text": ""
      },
      "attribute": "interval",
      "reflect": false
    },
    "programId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Program",
            "name": "uiName"
          }, {
            "text": "programSelector",
            "name": "uiWidget"
          }],
        "text": "Filters leaderboard to show only data from this program. Defaults to the program context where this leaderboard is.\nIf no program ID is set or provided by context, then a global leaderboard is shown."
      },
      "attribute": "program-id",
      "reflect": false
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<LeaderboardRankViewProps>",
        "resolved": "{ data?: { rank: string; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "LeaderboardRankViewProps": {
            "location": "import",
            "path": "./sqm-leaderboard-rank-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
}
function useLeaderboardRankDemo(props) {
  const rank = intl.formatMessage({ id: "rankText", defaultMessage: props.rankText }, {
    rank: 1,
  }) || "1st";
  return deepmerge({
    data: {
      rank,
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
