import { h } from "@stencil/core";
import { GenericTableView } from "../../tables/GenericTableView";
import { Converted as ConvertedStatus, DateCell, Denied as DeniedStatus, InProgress, PendingReview as PendingReviewStatus, Pending as PendingStatus, } from "./ReferralTableCell.stories";
import { AvailableNoExpiry, Denied, PayoutCancelled, PayoutFailed, PayoutSent, PendingNewTaxForm, PendingNoUnpend, PendingPartnerCreation, PendingReview, PendingTaxReview, PendingTaxSubmission, Redeemed, } from "./ReferralTableRewardsCell.stories";
import scenario from "./referral-table.feature";
export default {
  title: "Components/Referral 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_referral2.png", "empty-state-header": "View your referral details", "empty-state-text": "Track the status of your referrals and rewards earned by referring friends" }));
const baseReward = {
  id: "123",
  type: "CREDIT",
  value: 19,
  unit: "POINT",
  name: "test",
  dateGiven: 1627427794891,
  dateScheduledFor: 1628146800000,
  dateExpires: 1629010800000,
  dateCancelled: 134400,
  dateRedeemed: 0,
  fuelTankCode: "ABC",
  fuelTankType: "Code",
  currency: "null",
  prettyValue: "19 Points",
  statuses: ["AVAILABLE"],
  globalRewardKey: "Key",
  rewardRedemptionTransactions: {
    data: [
      {
        exchangedRewards: {
          data: [
            {
              prettyValue: "19 Points",
              type: "CREDIT",
              fuelTankCode: "ABC",
              globalRewardKey: "Key",
            },
          ],
        },
      },
    ],
  },
};
// Reward Status Cases
const pendingReward = {
  statuses: ["AVAILABLE", "PENDING"],
};
const cancelledReward = {
  statuses: ["PENDING", "CANCELLED"],
  dateCancelled: 1626850800000,
};
const expiredReward = {
  statuses: ["EXPIRED", "AVAILABLE"],
  dateExpires: 1626850800000,
};
const availableReward = {
  statuses: ["AVAILABLE"],
};
const nullExpiresIn = {
  dateExpires: null,
};
const simpleUserTableProps = {
  states: {
    hasPrev: false,
    hasNext: true,
    show: "rows",
    namespace: "sqm-referral-table",
  },
  data: {
    textOverrides: {
      showLabels: true,
      prevLabel: "Prev",
      moreLabel: "View More",
    },
    hiddenColumns: "",
    mdBreakpoint: 799,
    smBreakpoint: 599,
  },
  callbacks: {
    prevPage: () => console.log("Prev"),
    nextPage: () => console.log("Next"),
  },
  elements: {
    columns: ["Customer", "Status", "Date converted", "Rewards"],
    rows: [
      [
        h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
        h(PendingStatus, null),
        h(DateCell, null),
        h(PendingNoUnpend, null),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
        h(InProgress, null),
        h(DateCell, null),
        h(AvailableNoExpiry, null),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
        h(ConvertedStatus, null),
        h(DateCell, null),
        h(Redeemed, null),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
        h(ConvertedStatus, null),
        h(DateCell, null),
        h(PayoutSent, null),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
        h(ConvertedStatus, null),
        h(DateCell, null),
        h(PayoutFailed, null),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
        h(ConvertedStatus, null),
        h(DateCell, null),
        h(PayoutCancelled, null),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
        h(ConvertedStatus, null),
        h(DateCell, null),
        h(PendingNewTaxForm, null),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
        h(ConvertedStatus, null),
        h(DateCell, null),
        h(PendingPartnerCreation, null),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
        h(ConvertedStatus, null),
        h(DateCell, null),
        h(PendingTaxReview, null),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
        h(ConvertedStatus, null),
        h(DateCell, null),
        h(PendingTaxSubmission, null),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Tom Smith" }),
        h(PendingReviewStatus, null),
        h(DateCell, null),
        h(PendingReview, null),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Tom Smith" }),
        h(DeniedStatus, null),
        h(DateCell, null),
        h(Denied, null),
      ],
    ],
  },
};
const singleTableProps = {
  states: {
    hasPrev: false,
    hasNext: true,
    show: "rows",
    namespace: "sqm-referral-table",
  },
  data: {
    textOverrides: {
      showLabels: true,
      prevLabel: "Prev",
      moreLabel: "View More",
    },
    hiddenColumns: "",
    mdBreakpoint: 799,
    smBreakpoint: 599,
  },
  callbacks: {
    prevPage: () => console.log("Prev"),
    nextPage: () => console.log("Next"),
  },
  elements: {
    columns: ["Customer", "Status", "Date converted", "Rewards"],
    rows: [
      [
        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
        h("sqm-referral-table-user-cell", { name: "09/05/1999" }),
        h(AvailableNoExpiry, null),
      ],
    ],
  },
};
const hideLabelProps = {
  data: {
    textOverrides: {
      showLabels: false,
      prevLabel: "Prev",
      moreLabel: "View More",
    },
    hiddenColumns: "",
    mdBreakpoint: 799,
    smBreakpoint: 599,
  },
};
const customButtonProps = {
  states: {
    hasPrev: true,
    hasNext: true,
    show: "rows",
    namespace: "sqm-referral-table",
  },
  data: {
    textOverrides: {
      showLabels: true,
      prevLabel: "CUSTOM PREVIOUS TEXT",
      moreLabel: "CUSTOM NEXT TEXT",
    },
    hiddenColumns: "",
    mdBreakpoint: 799,
    smBreakpoint: 599,
  },
};
const longCellTextTableProps = {
  states: {
    hasPrev: false,
    hasNext: true,
    show: "rows",
    namespace: "sqm-referral-table",
  },
  data: {
    textOverrides: {
      showLabels: true,
      prevLabel: "Prev",
      moreLabel: "View More",
    },
    hiddenColumns: "",
    mdBreakpoint: 799,
    smBreakpoint: 599,
  },
  callbacks: {
    prevPage: () => console.log("Prev"),
    nextPage: () => console.log("Next"),
  },
  elements: {
    columns: [
      "Name",
      "Email",
      "DOB",
      "City",
      "State/Province",
      "Country",
      "Referrals",
      "Reward Earnings",
      "Status",
    ],
    rows: [
      [
        h("sqm-referral-table-user-cell", { name: "Bartholomew Christopher-Johnston Wallace" }),
        h("sqm-referral-table-user-cell", { name: "jsmith@gmail.com" }),
        h("sqm-referral-table-date-cell", { date: -22089600000 }),
        h("sqm-referral-table-user-cell", { name: "Vancouver" }),
        h("sqm-referral-table-cell", { innerTemplate: "British Columbia" }),
        h("sqm-referral-table-user-cell", { name: "Canada" }),
        h("sqm-referral-table-user-cell", { name: "14,000,000" }),
        h("sqm-referral-table-user-cell", { name: "$800,000,000,000" }),
        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
        h("sqm-referral-table-date-cell", { date: 800000000000 }),
        h("sqm-referral-table-user-cell", { name: "Los Angeles" }),
        h("sqm-referral-table-cell", { innerTemplate: "California" }),
        h("sqm-referral-table-user-cell", { name: "US" }),
        h("sqm-referral-table-user-cell", { name: "1" }),
        h("sqm-referral-table-user-cell", { name: "$5" }),
        h("sqm-referral-table-status-cell", { statusText: "In progress", converted: false }),
        ,
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
        h("sqm-referral-table-user-cell", { name: "sjoseph@gmail.com" }),
        h("sqm-referral-table-date-cell", { date: 444703707000 }),
        h("sqm-referral-table-user-cell", { name: "Toronto" }),
        h("sqm-referral-table-cell", { innerTemplate: "Ontario" }),
        h("sqm-referral-table-user-cell", { name: "Canada" }),
        h("sqm-referral-table-user-cell", { name: "10" }),
        h("sqm-referral-table-user-cell", { name: "$71" }),
        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
        ,
      ],
    ],
  },
};
const longColumnTextTableProps = {
  states: {
    hasPrev: false,
    hasNext: true,
    show: "rows",
    namespace: "sqm-referral-table",
  },
  data: {
    textOverrides: {
      showLabels: true,
      prevLabel: "Prev",
      moreLabel: "View More",
    },
    hiddenColumns: "",
    mdBreakpoint: 799,
    smBreakpoint: 599,
  },
  callbacks: {
    prevPage: () => console.log("Prev"),
    nextPage: () => console.log("Next"),
  },
  elements: {
    columns: [
      "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
      "Email",
      "DOB",
      "City",
      "State/Province",
      "Country",
      "Referrals",
      "Rewarddddddddddd Earningsssssssssssss",
      "Status",
    ],
    rows: [
      [
        h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
        h("sqm-referral-table-user-cell", { name: "jsmith@gmail.com" }),
        h("sqm-referral-table-date-cell", { date: -2128547493000 }),
        h("sqm-referral-table-user-cell", { name: "Vancouver" }),
        h("sqm-referral-table-cell", { innerTemplate: "British Columbia" }),
        h("sqm-referral-table-user-cell", { name: "Canada" }),
        h("sqm-referral-table-user-cell", { name: "14" }),
        h("sqm-referral-table-user-cell", { name: "$88" }),
        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
        h("sqm-referral-table-date-cell", { date: 800000000000 }),
        h("sqm-referral-table-user-cell", { name: "Los Angeles" }),
        h("sqm-referral-table-cell", { innerTemplate: "California" }),
        h("sqm-referral-table-user-cell", { name: "US" }),
        h("sqm-referral-table-user-cell", { name: "1" }),
        h("sqm-referral-table-user-cell", { name: "$5" }),
        h("sqm-referral-table-status-cell", { statusText: "In progress", converted: false }),
        ,
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
        h("sqm-referral-table-user-cell", { name: "sjoseph@gmail.com" }),
        h("sqm-referral-table-date-cell", { date: 444703707000 }),
        h("sqm-referral-table-user-cell", { name: "Toronto" }),
        h("sqm-referral-table-cell", { innerTemplate: "Ontario" }),
        h("sqm-referral-table-user-cell", { name: "Canada" }),
        h("sqm-referral-table-user-cell", { name: "10" }),
        h("sqm-referral-table-user-cell", { name: "$71" }),
        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
        ,
      ],
    ],
  },
};
const fullUserTableProps = (hidden = false) => ({
  states: {
    hasPrev: false,
    hasNext: true,
    show: "rows",
    namespace: "sqm-referral-table",
  },
  data: {
    textOverrides: {
      showLabels: true,
      prevLabel: "Prev",
      moreLabel: "View More",
    },
    hiddenColumns: hidden ? "0,1,2,3,4,5,6,7,8" : "-1",
    mdBreakpoint: 799,
    smBreakpoint: 599,
  },
  callbacks: {
    prevPage: () => console.log("Prev"),
    nextPage: () => console.log("Next"),
  },
  elements: {
    columns: [
      "Name",
      "Email",
      "DOB",
      "City",
      "State/Province",
      "Country",
      "Referrals",
      "Reward Earnings",
      "Status",
    ],
    rows: [
      [
        h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
        h("sqm-referral-table-user-cell", { name: "jsmith@gmail.com" }),
        h("sqm-referral-table-date-cell", { date: -2128547493000 }),
        h("sqm-referral-table-user-cell", { name: "Vancouver" }),
        h("sqm-referral-table-cell", { innerTemplate: "British Columbia" }),
        h("sqm-referral-table-user-cell", { name: "Canada" }),
        h("sqm-referral-table-user-cell", { name: "14" }),
        h("sqm-referral-table-user-cell", { name: "$88" }),
        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
        h("sqm-referral-table-date-cell", { date: 800000000000 }),
        h("sqm-referral-table-user-cell", { name: "Los Angeles" }),
        h("sqm-referral-table-cell", { innerTemplate: "California" }),
        h("sqm-referral-table-user-cell", { name: "US" }),
        h("sqm-referral-table-user-cell", { name: "1" }),
        h("sqm-referral-table-user-cell", { name: "$5" }),
        h("sqm-referral-table-status-cell", { statusText: "In progress", converted: false }),
        ,
      ],
      [
        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
        h("sqm-referral-table-user-cell", { name: "sjoseph@gmail.com" }),
        h("sqm-referral-table-date-cell", { date: 444703707000 }),
        h("sqm-referral-table-user-cell", { name: "Toronto" }),
        h("sqm-referral-table-cell", { innerTemplate: "Ontario" }),
        h("sqm-referral-table-user-cell", { name: "Canada" }),
        h("sqm-referral-table-user-cell", { name: "10" }),
        h("sqm-referral-table-user-cell", { name: "$71" }),
        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
        ,
      ],
    ],
  },
});
export const SimpleUserTable = () => {
  return h(GenericTableView, Object.assign({}, simpleUserTableProps));
};
export const SingleEntry = () => {
  return h(GenericTableView, Object.assign({}, singleTableProps));
};
export const HiddenLabelsTable = () => {
  return (h(GenericTableView, Object.assign({}, { ...simpleUserTableProps, ...hideLabelProps })));
};
export const CustomButtonTextTable = () => {
  return (h(GenericTableView, Object.assign({}, { ...simpleUserTableProps, ...customButtonProps })));
};
export const FullUserTable = () => {
  return h(GenericTableView, Object.assign({}, fullUserTableProps()));
};
export const LongCellTextTable = () => {
  return h(GenericTableView, Object.assign({}, longCellTextTableProps));
};
export const LongColumnTextTable = () => {
  return h(GenericTableView, Object.assign({}, longColumnTextTableProps));
};
export const EmptyTable = () => {
  return (h("sqm-referral-table", { demoData: {
      states: {
        hasPrev: false,
        hasNext: false,
        show: "empty",
        namespace: "sqm-referral-table",
      },
      data: {
        textOverrides: {
          showLabels: true,
          prevLabel: "Prev",
          moreLabel: "View More",
        },
        hiddenColumns: "",
        mdBreakpoint: 799,
        smBreakpoint: 599,
      },
      elements: {
        emptyElement: emptyElement,
        loadingElement: loadingElement,
        columns: ["Name", "Email", "DOB"],
        rows: [],
      },
    } }));
};
export const LoadingTable = () => {
  return (h("sqm-referral-table", { demoData: {
      states: {
        hasPrev: false,
        hasNext: false,
        show: "loading",
        namespace: "sqm-referral-table",
      },
      data: {
        textOverrides: {
          showLabels: true,
          prevLabel: "Prev",
          moreLabel: "View More",
        },
        hiddenColumns: "",
        mdBreakpoint: 799,
        smBreakpoint: 599,
      },
      elements: {
        emptyElement: emptyElement,
        loadingElement: loadingElement,
        columns: ["Name", "Email", "DOB"],
        rows: [],
      },
    } }));
};
export const FullRewardsTable = () => {
  return (h("sqm-referral-table", { demoData: {
      states: {
        hasPrev: false,
        hasNext: false,
        show: "rows",
        namespace: "sqm-referral-table",
      },
      data: {
        textOverrides: {
          showLabels: true,
          prevLabel: "Prev",
          moreLabel: "View More",
        },
        hiddenColumns: "1",
        mdBreakpoint: 799,
        smBreakpoint: 599,
      },
      elements: {
        emptyElement: emptyElement,
        loadingElement: loadingElement,
        columns: [
          "User",
          "Rewards",
          "Status",
          "Date Started",
          "Date Converted",
        ],
        rows: [
          [
            h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
            h("sqm-referral-table-rewards-cell", { rewards: [
                { ...baseReward, ...availableReward },
                { ...baseReward, ...pendingReward },
                { ...baseReward, ...cancelledReward },
              ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
            h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
            h("sqm-referral-table-date-cell", { date: 1626764400000 }),
            h("sqm-referral-table-date-cell", { date: 1627427794891 }),
          ],
          [
            h("sqm-referral-table-user-cell", { name: "Sarah Williams" }),
            h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...expiredReward }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
            h("sqm-referral-table-status-cell", { statusText: "Incomplete", converted: false }),
            h("sqm-referral-table-date-cell", { date: 1626764400000 }),
            h("sqm-referral-table-date-cell", { date: null }),
          ],
          [
            h("sqm-referral-table-user-cell", { name: "Marvin Smith" }),
            h("sqm-referral-table-rewards-cell", { rewards: [
                { ...baseReward, ...nullExpiresIn },
                { ...baseReward, ...pendingReward },
              ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
            h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
            h("sqm-referral-table-date-cell", { date: 1626764400000 }),
            h("sqm-referral-table-date-cell", { date: 1627427794891 }),
          ],
        ],
      },
    } }));
};
export const ColumnsMobileHidden = () => {
  return h(GenericTableView, Object.assign({}, fullUserTableProps(true)));
};
