import { h } from "@stencil/core";
import { GenericTableView } from "../../tables/GenericTableView";
import { DateCell, RewardsCellCreditCancelled, RewardsCellCreditFull, RewardsCellCreditLong, RewardsCellCreditPartial, RewardsCellCreditRedeemed, RewardsCellFueltank, RewardsCellFueltankLong, SourceCellDeletedUser, SourceCellDeletedReferral, SourceCellManual, SourceCellReferral, SourceCellReferred, StatusCellAvailable, StatusCellAvailableExpiry, StatusCellCancelled, StatusCellPending, StatusCellPendingUnhandled, StatusCellRedeemed, StatusCellDenied, StatusCellPendingReview, } from "./RewardsTableCell.stories";
import scenario from "./rewards-table.feature";
export default {
  title: "Components/Rewards Table",
  parameters: {
    scenario,
  },
};
const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
  h("sqm-table-row", null,
    h("sqm-table-cell", { colspan: 5 },
      h("sqm-skeleton", null))),
  h("sqm-table-row", null,
    h("sqm-table-cell", { colspan: 5 },
      h("sqm-skeleton", null))),
  h("sqm-table-row", null,
    h("sqm-table-cell", { colspan: 5 },
      h("sqm-skeleton", null))),
  h("sqm-table-row", null,
    h("sqm-table-cell", { colspan: 5 },
      h("sqm-skeleton", null))),
  h("sqm-table-row", null,
    h("sqm-table-cell", { colspan: 5 },
      h("sqm-skeleton", null)))));
const emptyElement = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "See all the rewards you have earned from referring friends and completing tasks" }));
const rewardsTableProps = (rows, empty = false, loading = false, prev = "Prev", next = "Next", hidden = "") => ({
  states: {
    hasPrev: false,
    hasNext: true,
    show: empty
      ? "empty"
      : loading
        ? "loading"
        : "rows",
    namespace: "sqm-rewards-table",
  },
  data: {
    textOverrides: {
      showLabels: true,
      prevLabel: prev,
      moreLabel: next,
    },
    hiddenColumns: hidden,
    mdBreakpoint: 799,
    smBreakpoint: 599,
  },
  callbacks: {
    prevPage: () => console.log("Prev"),
    nextPage: () => console.log("Next"),
  },
  elements: {
    columns: ["Rewards", "Status", "Source", "Date received"],
    rows: rows,
    emptyElement: emptyElement,
    loadingElement: loadingElement,
  },
});
const r_available = [
  h(RewardsCellCreditFull, null),
  h(StatusCellAvailable, null),
  h(SourceCellReferral, null),
  h(DateCell, null),
];
const r_expired = [
  h(RewardsCellCreditPartial, null),
  h(StatusCellAvailableExpiry, null),
  h(SourceCellReferred, null),
  h(DateCell, null),
];
const r_deleted = [
  h(RewardsCellCreditCancelled, null),
  h(StatusCellCancelled, null),
  h(SourceCellDeletedReferral, null),
  h(DateCell, null),
];
const r_cancelled = [
  h(RewardsCellCreditCancelled, null),
  h(StatusCellCancelled, null),
  h(SourceCellDeletedUser, null),
  h(DateCell, null),
];
const r_redeemed = [
  h(RewardsCellCreditRedeemed, null),
  h(StatusCellRedeemed, null),
  h(SourceCellManual, null),
  h(DateCell, null),
];
const r_denied = [
  h(RewardsCellCreditRedeemed, null),
  h(StatusCellDenied, null),
  h(SourceCellManual, null),
  h(DateCell, null),
];
const r_pending_review = [
  h(RewardsCellCreditRedeemed, null),
  h(StatusCellPendingReview, null),
  h(SourceCellManual, null),
  h(DateCell, null),
];
const r_long = [
  h(RewardsCellCreditLong, null),
  h(StatusCellAvailableExpiry, null),
  h(SourceCellReferred, null),
  h(DateCell, null),
];
const r_fueltank = [
  h(RewardsCellFueltank, null),
  h(StatusCellPending, null),
  h(SourceCellManual, null),
  h(DateCell, null),
];
const r_fueltank_long = [
  h(RewardsCellFueltankLong, null),
  h(StatusCellPendingUnhandled, null),
  h(SourceCellManual, null),
  h(DateCell, null),
];
export const RewardsTable = () => {
  return (h(GenericTableView, Object.assign({}, rewardsTableProps([
    r_available,
    r_redeemed,
    r_cancelled,
    r_deleted,
    r_expired,
    r_denied,
    r_pending_review,
  ]))));
};
export const RewardsTableSingle = () => {
  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_fueltank]))));
};
export const RewardsTableLong = () => {
  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_fueltank_long, r_long]))));
};
export const RewardsTableEmpty = () => {
  return h(GenericTableView, Object.assign({}, rewardsTableProps([], true)));
};
export const RewardsTableLoading = () => {
  return (h(GenericTableView, Object.assign({}, rewardsTableProps([], false, true))));
};
export const CustomButtonTextTable = () => {
  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired], false, false, "CUSTOM PREVIOUS TEXT", "CUSTOM NEXT TEXT"))));
};
export const ColumnsMobileHidden = () => {
  return (h(GenericTableView, Object.assign({}, rewardsTableProps([r_available, r_redeemed, r_cancelled, r_expired], false, false, undefined, undefined, "0,1,2,3"))));
};
