import { h } from "@stencil/core";
import { BigStatView } from "./sqm-big-stat-view";
import scenario from "./BigStat.feature";
export default {
  title: "Components/Big Stat",
  parameters: {
    scenario,
  },
};
export const Default = () => {
  const props = { value: 990000, statvalue: "9.900,00", loading: false };
  return h(BigStatView, Object.assign({}, props), "Big stat");
};
export const LeftAlign = () => {
  const props = {
    value: 500,
    statvalue: "500",
    alignment: "left",
    loading: false,
  };
  return h(BigStatView, Object.assign({}, props), "Big stat");
};
export const RightAlign = () => {
  const props = {
    value: 500,
    statvalue: "500",
    alignment: "right",
    loading: false,
  };
  return h(BigStatView, Object.assign({}, props), "Big stat");
};
export const FlexReverse = () => {
  const props = {
    value: 500,
    statvalue: "500",
    flexReverse: true,
    loading: false,
  };
  return h(BigStatView, Object.assign({}, props), "Big stat");
};
export const FlexReverseRight = () => {
  const props = {
    value: 500,
    statvalue: "500",
    flexReverse: true,
    alignment: "right",
    loading: false,
  };
  return h(BigStatView, Object.assign({}, props), "Big stat");
};
export const FlexReverseLeft = () => {
  const props = {
    value: 500,
    statvalue: "500",
    flexReverse: true,
    alignment: "left",
    loading: false,
  };
  return h(BigStatView, Object.assign({}, props), "Big stat");
};
export const NoStatValue = () => {
  const props = {
    value: 0,
    statvalue: "...",
    loading: false,
  };
  return h(BigStatView, Object.assign({}, props), "Big stat");
};
export const InvalidStatValue = () => {
  const props = {
    value: 0,
    statvalue: "!!!",
    loading: false,
  };
  return h(BigStatView, Object.assign({}, props), "Big stat");
};
export const CustomStyles = () => {
  return (h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
    h("p", null, "Giftcards Earned")));
};
export const MultipleStats = () => {
  return (h("sqm-stat-container", { space: "xxx-large", display: "flex" },
    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
      h("sqm-text", null,
        h("p", null, "Rewards Redeemed"))),
    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
      h("sqm-text", null,
        h("p", null, "Rewards Redeemed"))),
    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
      h("sqm-text", null,
        h("p", null, "Points Balance")))));
};
export const MultipleStatsWithCustomBranding = () => {
  return (h("sqm-stat-container", { space: "xxx-large", display: "grid", alignment: "center", "hide-border": "true" },
    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
      h("p", null, "Giftcards Earned")),
    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
      h("p", null, "Referrals")),
    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
      h("p", null, "Points balance"))));
};
