import { h } from "@stencil/core";
import { GenericTableView } from "../../tables/GenericTableView";
import { DateCell, DownloadCell, EarningsAfterTaxCell, EarningsCell, InvoiceNumberCell, IndirectTaxCell, } from "./InvoiceTableCell.stories";
import { InvoiceTableView } from "./sqm-invoice-table-view";
export default {
  title: "Components/Invoice Table",
};
const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
  h("sqm-table-row", null,
    h("sqm-table-cell", { colspan: 6 },
      h("sqm-skeleton", null))),
  h("sqm-table-row", null,
    h("sqm-table-cell", { colspan: 6 },
      h("sqm-skeleton", null))),
  h("sqm-table-row", null,
    h("sqm-table-cell", { colspan: 6 },
      h("sqm-skeleton", null))),
  h("sqm-table-row", null,
    h("sqm-table-cell", { colspan: 6 },
      h("sqm-skeleton", null))),
  h("sqm-table-row", null,
    h("sqm-table-cell", { colspan: 6 },
      h("sqm-skeleton", null)))));
const emptyElement = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1710363322/squatch-assets/invoice-table-empty.png", "empty-state-header": "View your invoice details", "empty-state-text": "Track the status of your invoices and rewards earned by referring friends" }));
// Reward Status Cases
const simpleInvoiceTableProps = {
  states: {
    hasPrev: false,
    hasNext: true,
    show: "rows",
    namespace: "sqm-invoice-table",
  },
  data: {
    textOverrides: {
      showLabels: true,
      prevLabel: "Prev",
      moreLabel: "Next",
    },
    hiddenColumns: "",
    mdBreakpoint: 799,
    smBreakpoint: 599,
  },
  callbacks: {
    prevPage: () => console.log("Prev"),
    nextPage: () => console.log("Next"),
  },
  elements: {
    columns: [
      h("span", null),
      "Date created",
      "Invoice",
      "Earnings",
      "Indirect tax",
      "Earnings after tax",
    ],
    rows: [
      [
        h(DownloadCell, null),
        h(DateCell, null),
        h(InvoiceNumberCell, null),
        h(EarningsCell, null),
        h(IndirectTaxCell, null),
        h(EarningsAfterTaxCell, null),
      ],
      [
        h(DownloadCell, null),
        h(DateCell, null),
        h(InvoiceNumberCell, null),
        h(EarningsCell, null),
        h(IndirectTaxCell, null),
        h(EarningsAfterTaxCell, null),
      ],
      [
        h(DownloadCell, null),
        h(DateCell, null),
        h(InvoiceNumberCell, null),
        h(EarningsCell, null),
        h(IndirectTaxCell, null),
        h(EarningsAfterTaxCell, null),
      ],
    ],
  },
};
export const SimpleInvoiceTable = () => {
  return (h(InvoiceTableView, { header: "Invoices", description: "Invoice table description" },
    h(GenericTableView, Object.assign({}, simpleInvoiceTableProps))));
};
export const EmptyTable = () => {
  return (h("sqm-invoice-table", { demoData: {
      states: {
        hasPrev: false,
        hasNext: false,
        show: "empty",
        namespace: "sqm-invoice-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-invoice-table", { demoData: {
      states: {
        hasPrev: false,
        hasNext: false,
        show: "loading",
        namespace: "sqm-invoice-table",
      },
      data: {
        textOverrides: {
          showLabels: true,
          prevLabel: "Prev",
          moreLabel: "View More",
        },
        hiddenColumns: "",
        mdBreakpoint: 799,
        smBreakpoint: 599,
      },
      elements: {
        emptyElement: emptyElement,
        loadingElement: loadingElement,
        columns: [
          "",
          "Date created",
          "Invoice",
          "Earnings",
          "Indirect tax",
          "Earnings after tax",
        ],
        rows: [],
      },
    } }));
};
