import { flexRender } from "@tanstack/react-table";
import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from "@truststack/icons-ui";
import { Fragment, useContext, useState } from "react";
import { createStyledContext, ScrollView, styled, ThemeableStack, withStaticProperties, XStack } from "tamagui";
import { Chip } from "./Chip.mjs";
import { IconButton } from "./IconButton.mjs";
import { Spinner } from "./Spinner.mjs";
import { Body, Label, Title } from "./typography.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
const TableContext = createStyledContext({
    density: "0",
    transparent: !1
  }),
  Row = styled(ThemeableStack, {
    context: TableContext,
    flexDirection: "row",
    gap: 12,
    padding: 8,
    variants: {
      density: {
        0: {},
        "-1": {
          padding: 6,
          gap: 8
        },
        "-2": {
          padding: 4,
          gap: 6
        },
        "-3": {
          padding: 2,
          gap: 2
        }
      },
      outline: {
        true: {
          borderBottomWidth: "$border.outline",
          borderBottomColor: "$outlineVariant"
        },
        false: {}
      }
    },
    defaultVariants: {
      outline: !0
    }
  }),
  Cell = styled(ThemeableStack, {
    flexDirection: "row",
    alignItems: "center",
    context: TableContext,
    flexBasis: 1,
    flexGrow: 1,
    minHeight: 40,
    marginLeft: 16,
    marginRight: 16,
    variants: {
      align: {
        right: {
          justifyContent: "flex-end"
        },
        center: {
          justifyContent: "center"
        }
      },
      density: {
        0: {},
        "-1": {
          minHeight: 36,
          marginLeft: 12,
          marginRight: 12
        },
        "-2": {
          minHeight: 32,
          marginLeft: 8,
          marginRight: 8
        },
        "-3": {
          minHeight: 28,
          marginLeft: 4,
          marginRight: 4
        }
      },
      shrink: {
        true: {
          flexGrow: 0,
          flexShrink: 1
        },
        false: {}
      }
    }
  }),
  Text = styled(Body, {
    name: "TableText",
    numberOfLines: 1,
    adjustsFontSizeToFit: !0
  }),
  HeaderCell = styled(ThemeableStack, {
    flexDirection: "row",
    alignItems: "center",
    context: TableContext,
    flexBasis: 1,
    flexGrow: 1,
    minHeight: 36,
    marginLeft: 16,
    marginRight: 16,
    variants: {
      align: {
        right: {
          justifyContent: "flex-end"
        },
        center: {
          justifyContent: "center"
        }
      },
      density: {
        0: {},
        "-1": {
          minHeight: 32,
          marginLeft: 12,
          marginRight: 12
        },
        "-2": {
          minHeight: 28,
          marginLeft: 8,
          marginRight: 8
        },
        "-3": {
          minHeight: 24,
          marginLeft: 4,
          marginRight: 4
        }
      },
      shrink: {
        true: {
          flexGrow: 0,
          flexShrink: 1
        },
        false: {}
      }
    }
  }),
  HeaderLabel = styled(Label, {
    name: "HeaderLabel",
    size: "large",
    numberOfLines: 1,
    adjustsFontSizeToFit: !0
  }),
  TableBody = styled(ThemeableStack, {
    flexDirection: "column",
    context: TableContext,
    flexShrink: 1
  }),
  TableHead = styled(ThemeableStack, {
    flexDirection: "column",
    context: TableContext,
    flexShrink: 1,
    variants: {
      transparent: {
        true: {
          backgroundColor: "transparent"
        },
        false: {
          backgroundColor: "$surface"
        }
      }
    }
  }),
  TableComp = styled(ThemeableStack, {
    context: TableContext,
    borderRadius: "$shape.corner_medium",
    overflow: "hidden",
    variants: {
      density: {
        0: {},
        "-1": {},
        "-2": {},
        "-3": {}
      },
      transparent: {
        true: {
          backgroundColor: "transparent"
        },
        false: {
          backgroundColor: "$surface"
        }
      },
      rightFlat: {
        true: {
          borderTopRightRadius: 0,
          borderBottomRightRadius: 0
        },
        false: {}
      },
      leftFlat: {
        true: {
          borderTopLeftRadius: 0,
          borderBottomLeftRadius: 0
        },
        false: {}
      }
    },
    defaultVariants: {
      transparent: !1
    }
  }),
  TableTitle = styled(Title, {
    name: "TableTitle",
    textAlign: "center"
  });
function TableSpinner() {
  return /* @__PURE__ */jsx(Row, {
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    p: 12,
    children: /* @__PURE__ */jsx(Spinner, {})
  });
}
function NoResults({
  message = "No results found.",
  ...props
}) {
  return /* @__PURE__ */jsx(Row, {
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    p: 12,
    ...props,
    children: /* @__PURE__ */jsx(Text, {
      children: message
    })
  });
}
function Pagination({
  onRowsPerPageChange,
  rowsPerPage,
  page,
  onPageChange
}) {
  const {
    density
  } = useContext(TableContext);
  return /* @__PURE__ */jsxs(XStack, {
    gap: 20,
    alignItems: "center",
    justifyContent: "flex-end",
    width: "100%",
    p: density === "0" ? 16 : density === "-1" ? 12 : density === "-2" ? 8 : 4,
    children: [/* @__PURE__ */jsxs(Text, {
      children: ["Showing ", page * rowsPerPage + 1, " - ", page * rowsPerPage + rowsPerPage]
    }), /* @__PURE__ */jsxs(XStack, {
      gap: 12,
      children: [/* @__PURE__ */jsx(Chip, {
        variant: rowsPerPage == 5 ? "filter" : "assist",
        onPress: () => onRowsPerPageChange(5),
        children: /* @__PURE__ */jsx(Chip.Text, {
          children: "5"
        })
      }), /* @__PURE__ */jsx(Chip, {
        variant: rowsPerPage == 10 ? "filter" : "assist",
        onPress: () => onRowsPerPageChange(10),
        children: /* @__PURE__ */jsx(Chip.Text, {
          children: "10"
        })
      }), /* @__PURE__ */jsx(Chip, {
        variant: rowsPerPage == 20 ? "filter" : "assist",
        onPress: () => onRowsPerPageChange(20),
        children: /* @__PURE__ */jsx(Chip.Text, {
          children: "20"
        })
      })]
    }), /* @__PURE__ */jsxs(XStack, {
      gap: 12,
      children: [/* @__PURE__ */jsx(IconButton, {
        variant: page == 0 ? "standard" : "filled-tertiary",
        onPress: () => onPageChange(0),
        disabled: page == 0,
        children: /* @__PURE__ */jsx(IconButton.Icon, {
          Icon: ChevronFirst
        })
      }), /* @__PURE__ */jsx(IconButton, {
        variant: "standard",
        disabled: page == 0,
        onPress: () => onPageChange(page - 1),
        children: /* @__PURE__ */jsx(IconButton.Icon, {
          Icon: ChevronLeft
        })
      }), /* @__PURE__ */jsx(IconButton, {
        variant: "standard",
        onPress: () => onPageChange(page + 1),
        children: /* @__PURE__ */jsx(IconButton.Icon, {
          Icon: ChevronRight
        })
      }), /* @__PURE__ */jsx(IconButton, {
        variant: "standard",
        disabled: !0,
        children: /* @__PURE__ */jsx(IconButton.Icon, {
          Icon: ChevronLast
        })
      })]
    })]
  });
}
const TextCell = Cell.styleable(({
    children,
    ...props
  }, ref) => /* @__PURE__ */jsx(Cell, {
    ...props,
    ref,
    children: /* @__PURE__ */jsx(Text, {
      children
    })
  })),
  HeaderTextCell = HeaderCell.styleable(({
    children,
    ...props
  }, ref) => /* @__PURE__ */jsx(HeaderCell, {
    ...props,
    ref,
    children: /* @__PURE__ */jsx(HeaderLabel, {
      children
    })
  })),
  Table = withStaticProperties(TableComp, {
    props: TableContext.Provider,
    Body: TableBody,
    Cell,
    Head: TableHead,
    HeaderCell,
    HeaderLabel,
    HeaderTextCell,
    NoResults,
    Pagination,
    Row,
    Spinner: TableSpinner,
    Text,
    TextCell,
    Title: TableTitle
  });
function DataTable({
  table,
  loading,
  pagination,
  TableHeadProps = {},
  noResultsMessage,
  expandedRow,
  scrollViewHeight,
  ...props
}) {
  const noResults = !table.getRowCount() && !loading,
    headerGroups = table.getHeaderGroups(),
    tableRows = table.getRowModel().rows;
  return /* @__PURE__ */jsxs(Table, {
    backgroundColor: "$surfaceContainerHigh",
    ...props,
    children: [/* @__PURE__ */jsx(Table.Head, {
      ...TableHeadProps,
      children: headerGroups.map(headerGroup => /* @__PURE__ */jsx(Table.Row, {
        children: headerGroup.headers.map((header, index) => /* @__PURE__ */jsx(Fragment, {
          children: flexRender(typeof header.column.columnDef.header == "string" ? /* @__PURE__ */jsx(Table.HeaderTextCell, {
            children: header.column.columnDef.header
          }) : header.column.columnDef.header, header.getContext())
        }, `header-${index}`))
      }, headerGroup.id))
    }), /* @__PURE__ */jsx(Table.Body, {
      children: /* @__PURE__ */jsxs(ScrollView, {
        maxHeight: scrollViewHeight,
        showsVerticalScrollIndicator: !0,
        children: [loading && /* @__PURE__ */jsx(Table.Spinner, {}), noResults && /* @__PURE__ */jsx(Table.NoResults, {
          message: noResultsMessage
        }), tableRows.map(row => /* @__PURE__ */jsxs(Fragment, {
          children: [/* @__PURE__ */jsx(Table.Row, {
            children: row.getVisibleCells().map((cell, index) => /* @__PURE__ */jsx(Fragment, {
              children: flexRender(cell.column.columnDef.cell, cell.getContext())
            }, `cell-${index}`))
          }, row.id), row.getIsExpanded() && expandedRow && expandedRow(row)]
        }, row.id))]
      })
    }), pagination && /* @__PURE__ */jsx(Table.Pagination, {
      ...pagination
    })]
  });
}
const usePagination = ({
  rowsPerPage: defaultRowsPerPage
} = {
  rowsPerPage: 10
}) => {
  const [page, setPage] = useState(0),
    [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage);
  return {
    page,
    setPage,
    rowsPerPage,
    setRowsPerPage,
    offset: page * rowsPerPage,
    limit: rowsPerPage
  };
};
export { DataTable, Table, usePagination };
//# sourceMappingURL=Table.mjs.map
