import { h } from "@stencil/core";
import scenario from "./ReferralCodes.feature";
export default {
  title: "Components/Referral Codes",
  parameters: {
    scenario,
  },
};
const demoData = {
  titleText: "Start sharing",
  emptyStateHeaderText: "Your new codes and links aren’t ready yet",
  emptyStateDescriptionText: "Please contact our program support team to let them know you’re out of codes.",
  emptyStateImageUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png",
  states: {
    noCodes: false,
    loading: false,
  },
};
const pagination = (slot) => {
  return h("sqm-pagination", { slot: slot });
};
const shareButtons = (slot) => {
  return (h("sqm-portal-container", { gap: "small", slot: slot },
    h("sqm-share-button", { medium: "email" }, "Share via email"),
    h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
    h("sqm-share-button", { medium: "whatsapp" }, "Share on WhatsApp")));
};
const shareCodes = (slot) => {
  return h("sqm-referral-code", { slot: slot });
};
const shareCodeWithPreviouslyCopied = (slot) => {
  return (h("sqm-referral-code", { slot: slot, showNotificationText: true, notificationText: "You\u2019ve copied this before." }));
};
export const ReferralCodes = () => {
  return (h("sqm-referral-codes", null,
    pagination("pagination"),
    shareCodes("shareCodes"),
    shareButtons("shareButtons")));
};
export const WithPreviouslyCopiedCode = () => {
  return (h("sqm-referral-codes", null,
    pagination("pagination"),
    shareCodeWithPreviouslyCopied("shareCodes"),
    shareButtons("shareButtons")));
};
export const WithPreviouslyCopiedCodeAndCustomColor = () => {
  return (h("sqm-referral-codes", { textColor: "red" },
    pagination("pagination"),
    shareCodeWithPreviouslyCopied("shareCodes"),
    shareButtons("shareButtons")));
};
export const Empty = () => {
  return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, noCodes: true } } },
    pagination("pagination"),
    shareCodes("shareCodes"),
    shareButtons("shareButtons")));
};
export const EmptyWithCustomTextAndImage = () => {
  return (h("sqm-referral-codes", { emptyStateHeaderText: "Tus nuevos c\u00F3digos y enlaces a\u00FAn no est\u00E1n listos", emptyStateDescriptionText: "Comun\u00EDquese con nuestro equipo de soporte del programa para informarles que no tiene c\u00F3digos.", emptyStateImageUrl: "https://img.freepik.com/free-vector/hand-drawn-no-data-concept_52683-127829.jpg?t=st=1738890457~exp=1738894057~hmac=2f0f32c1f0fc051f47d772a4517e2e4c4f38af5069fb855edc96d8331d9d1329&w=826", demoData: {
      states: { ...demoData.states, noCodes: true },
    } },
    pagination("pagination"),
    shareCodes("shareCodes"),
    shareButtons("shareButtons")));
};
export const Loading = () => {
  return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, loading: true } } },
    pagination("pagination"),
    shareCodes("shareCodes"),
    shareButtons("shareButtons")));
};
