import { h } from "@stencil/core";
import { LeaderboardView } from "../sqm-leaderboard/sqm-leaderboard-view";
import scenario from "./sqm-empty.feature";
export default {
  title: "Components/Empty State",
  parameters: {
    scenario,
  },
};
const defaultStyles = {
  usersheading: "TOP REFERRERS",
  statsheading: "NEW CUSTOMERS",
};
export const Empty = () => {
  return (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" }));
};
const defaultElements = {
  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" })),
  essentials: (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" })),
  loadingstate: (h("slot", { name: "loading" },
    h("table", null, [...Array(10)].map(() => {
      return (h("tr", null,
        h("td", null,
          h("sqm-skeleton", null))));
    })))),
};
export const SlottedIntoComponent = () => {
  const props = {
    states: {
      loading: false,
      hasLeaders: false,
      isEssentials: false,
      styles: {
        ...defaultStyles,
      },
    },
    data: {
      rankType: "rowNumber",
      leaderboard: [],
      rowNumber: 10,
      showUser: true,
      userRank: {
        firstName: "Kutay",
        lastInitial: "C",
        value: 8,
        rowNumber: 11,
        rank: 23,
      },
    },
    elements: {
      ...defaultElements,
    },
  };
  return h(LeaderboardView, Object.assign({}, props));
};
