import { isDemo } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, Prop, h, State } from "@stencil/core";
import deepmerge from "deepmerge";
import { withShadowView } from "../../ShadowViewAddon";
import { LeaderboardView } from "./sqm-leaderboard-view";
import { useLeaderboard } from "./useLeaderboard";
/**
 * @uiName Leaderboard
 * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section"]
 * @slots [{"name":"empty", "title":"Empty State"}]
 * @requiredFeatures ["LEADERBOARDS"]
 * @exampleGroup Leaderboard
 * @example Referral Started - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
 * @example Referral Converted - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topConvertedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
 * @example Points Earned - <sqm-leaderboard usersheading="Name" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Points" rank-type="rank" leaderboard-type="topPointEarners" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
 * @example Anonymous Leaderboard - <div style="display: flex; align-items: flex-start; justify-content: center; width: 100%; gap: 50px;"><div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 30%;"><sqm-image width="70%" alignment="center" image-url="https://res.cloudinary.com/saasquatch-staging/image/upload/v1729728469/Leaderboard_image_z87lsm.png"></sqm-image><h2 style="margin: auto;">Top Performers</h2><p style="margin: 0; text-align: center;">The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!</p></div><sqm-leaderboard width="300px" usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true" hide-names="true" hide-viewer="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard></div>
 * @featureTooltip <div>Motivate your participants by gamifying your program. Contact <a href="mailto:saasquatch-support%40impact.com?subject=Next steps for Leaderboards feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Leaderboards can support the growth of our referral program. Please connect me with a program strategy manager to discuss this feature further, and determine the next steps.%0D%0A%0D%0A%0D%0AThank you,%0D%0A[Add your name here]">Support</a> to upgrade your plan and add a leaderboard.</div>
 */
export class Leaderboard {
  constructor() {
    /**
     * Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. "500px", "33%", etc.)
     *
     * @uiName Width
     */
    this.width = "100%";
    /**
     * @uiName Viewing user text
     */
    this.viewingUserText = "You";
    /**
     * Hide the Names of users to protect personal identifiable information
     *
     * @uiName Hide users names
     * @default
     */
    this.hideNames = false;
    /**
     * Title displayed for users without names
     * @uiName Unknown user text
     */
    this.anonymousUser = "Anonymous User";
    /**
     * Control the maximum amount of rows displayed on the leaderboard.
     *
     * @uiName Maximum rows number
     */
    this.maxRows = 10;
    /**
     * Hide the viewer's leaderboard row if not in the top results.
     *
     * @uiName Hide viewing user
     * @default
     */
    this.hideViewer = false;
    this.ignored = true;
    withHooks(this);
    withShadowView(this);
  }
  disconnectedCallback() { }
  render() {
    const props = {
      empty: h(EmptySlot, null),
      usersheading: this.usersheading,
      statsheading: this.statsheading,
      rankheading: this.rankheading,
      rankType: this.rankType,
      leaderboardType: this.leaderboardType,
      maxRows: this.maxRows,
      programId: this.programId,
      anonymousUser: this.anonymousUser,
      interval: this.interval,
      hideViewer: this.hideViewer,
      viewingUserText: this.viewingUserText,
      hideNames: this.hideNames,
      showRank: this.showRank,
      rankSuffix: this.rankSuffix,
      width: this.width,
      viewingUserHighlightColor: this.viewingUserHighlightColor,
      viewingUserHighlightTextColor: this.viewingUserHighlightTextColor,
      background: this.background,
      borderColor: this.borderColor,
      textColor: this.textColor,
      borderRadius: this.borderRadius,
    };
    const demoProps = { ...props, demoData: this.demoData };
    const viewprops = isDemo()
      ? useLeaderboardDemo(demoProps)
      : useLeaderboard(props);
    return h(LeaderboardView, Object.assign({}, viewprops));
  }
  static get is() { return "sqm-leaderboard"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "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
    },
    "usersheading": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "User column heading",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "usersheading",
      "reflect": false
    },
    "statsheading": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Stats column heading",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "statsheading",
      "reflect": false
    },
    "rankheading": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Rank column heading",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "rankheading",
      "reflect": false
    },
    "showRank": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Show leaderboard rank",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "show-rank",
      "reflect": false
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Width",
            "name": "uiName"
          }],
        "text": "Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. \"500px\", \"33%\", etc.)"
      },
      "attribute": "width",
      "reflect": false,
      "defaultValue": "\"100%\""
    },
    "rankSuffix": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Rank Suffix",
            "name": "uiName"
          }],
        "text": "A JSONata string that formats the rank with the appropriate ordinal suffix (e.g., \"st\" for 1st, \"nd\" for 2nd, \"rd\" for 3rd, and \"th\" for all others)."
      },
      "attribute": "rank-suffix",
      "reflect": false
    },
    "viewingUserText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Viewing user text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "viewing-user-text",
      "reflect": false,
      "defaultValue": "\"You\""
    },
    "hideNames": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Hide users names",
            "name": "uiName"
          }, {
            "text": undefined,
            "name": "default"
          }],
        "text": "Hide the Names of users to protect personal identifiable information"
      },
      "attribute": "hide-names",
      "reflect": false,
      "defaultValue": "false"
    },
    "rankType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"rowNumber\" | \"rank\" | \"denseRank\"",
        "resolved": "\"denseRank\" | \"rank\" | \"rowNumber\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Rank type",
            "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
    },
    "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
    },
    "anonymousUser": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Unknown user text",
            "name": "uiName"
          }],
        "text": "Title displayed for users without names"
      },
      "attribute": "anonymous-user",
      "reflect": false,
      "defaultValue": "\"Anonymous User\""
    },
    "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
    },
    "maxRows": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Maximum rows number",
            "name": "uiName"
          }],
        "text": "Control the maximum amount of rows displayed on the leaderboard."
      },
      "attribute": "max-rows",
      "reflect": false,
      "defaultValue": "10"
    },
    "hideViewer": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Hide viewing user",
            "name": "uiName"
          }, {
            "text": undefined,
            "name": "default"
          }],
        "text": "Hide the viewer's leaderboard row if not in the top results."
      },
      "attribute": "hide-viewer",
      "reflect": false,
      "defaultValue": "false"
    },
    "viewingUserHighlightColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Viewing User Highlight Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Changes the background color of the viewing user row in the leaderboard."
      },
      "attribute": "viewing-user-highlight-color",
      "reflect": false
    },
    "viewingUserHighlightTextColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Viewing User Text Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Changes the text color of the viewing user row in the leaderboard."
      },
      "attribute": "viewing-user-highlight-text-color",
      "reflect": false
    },
    "background": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Background Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Changes the background color of the leaderboard."
      },
      "attribute": "background",
      "reflect": false
    },
    "borderColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Border Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Changes the border color of the table rows."
      },
      "attribute": "border-color",
      "reflect": false
    },
    "textColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Text Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Text color of the leaderboard."
      },
      "attribute": "text-color",
      "reflect": false
    },
    "borderRadius": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Border Radius",
            "name": "uiName"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Leaderboard border radius in pixels."
      },
      "attribute": "border-radius",
      "reflect": false
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<LeaderboardViewProps>",
        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; viewingUserHighlightColor?: string; viewingUserHighlightTextColor?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; background?: string; borderColor?: string; textColor?: string; borderRadius?: number; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName?: string; lastInitial?: string; rowNumber: number; }; }; elements?: { empty: VNode; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "LeaderboardViewProps": {
            "location": "import",
            "path": "./sqm-leaderboard-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", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
}
function useLeaderboardDemo(props) {
  var _a, _b;
  const data = ((_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.leaderboard) || [
    {
      firstName: "Viktor",
      lastInitial: "V",
      textValue: "82",
      rank: 1,
      rowNumber: 1,
    },
    {
      firstName: "MF",
      lastInitial: "D",
      textValue: "73",
      rank: 2,
      rowNumber: 2,
    },
    {
      firstName: "Freddie",
      lastInitial: "G",
      textValue: "64",
      rank: 3,
      rowNumber: 3,
    },
    {
      firstName: "Benny",
      lastInitial: "B",
      textValue: "55",
      rank: 4,
      rowNumber: 4,
    },
    {
      textValue: "46",
      rank: 5,
      rowNumber: 5,
    },
  ];
  return deepmerge({
    states: {
      loading: false,
      hasLeaders: true,
      isEssentials: false,
      styles: {
        usersheading: props.usersheading
          ? props.usersheading
          : "Top referrers",
        statsheading: props.statsheading
          ? props.statsheading
          : "New customers",
        rankheading: props.rankheading ? props.rankheading : "Rank",
        anonymousUser: props.anonymousUser
          ? props.anonymousUser
          : "Anonymous User",
        showRank: props.showRank,
        hideViewer: props.hideViewer,
        viewingUserText: props.viewingUserText,
        hideNames: props.hideNames,
        rankSuffix: props.rankSuffix,
        width: props.width,
        viewingUserHighlightColor: props.viewingUserHighlightColor,
        viewingUserHighlightTextColor: props.viewingUserHighlightTextColor,
        background: props.background,
        borderColor: props.borderColor,
        textColor: props.textColor,
        borderRadius: props.borderRadius,
      },
    },
    data: {
      rankType: "rowNumber",
      leaderboard: data,
    },
    elements: {
      empty: h(EmptySlot, null),
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
