import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "textPlaceholder", "onSelected", "dataLength", "viewLength", "className", "loading", "isLoading", "containerStyle", "rowErrors", "rowClassName"];
import _JSXStyle from "../styled-jsx.es.js";
/* "use client" */

import React, { useEffect, useMemo, useRef, useState } from 'react';
import TableHead from './table-head';
import TableBody from './table-body';
import useRealShape from '../utils/use-real-shape';
import useResize from '../utils/use-resize';
import { TableContext } from './table-context';
import useScale, { withScale } from '../use-scale';
import TableColumn from './table-column';
import { ChevronLeft, ChevronRight } from '@helpdice/icons';
import Pagination from '../pagination';
import Button from '../button';
import Tooltip from '../tooltip';
import Placeholder from '../placeholder';
import { useTheme } from '@helpdice/theme';
import Loading from '../loading';
function TableComponent(tableProps) {
  /* eslint-disable  @typescript-eslint/no-unused-vars */
  var _ref = tableProps,
    children = _ref.children,
    customData = _ref.data,
    _ref$initialData = _ref.initialData,
    initialData = _ref$initialData === void 0 ? [] : _ref$initialData,
    _ref$hover = _ref.hover,
    hover = _ref$hover === void 0 ? true : _ref$hover,
    _ref$emptyText = _ref.emptyText,
    emptyText = _ref$emptyText === void 0 ? '' : _ref$emptyText,
    _ref$rowDraggable = _ref.rowDraggable,
    rowDraggable = _ref$rowDraggable === void 0 ? false : _ref$rowDraggable,
    _ref$readOnly = _ref.readOnly,
    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
    _ref$cursorPagination = _ref.cursorPagination,
    cursorPagination = _ref$cursorPagination === void 0 ? false : _ref$cursorPagination,
    previousCursor = _ref.previousCursor,
    nextCursor = _ref.nextCursor,
    _ref$hasMore = _ref.hasMore,
    hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
    onNextPage = _ref.onNextPage,
    onPreviousPage = _ref.onPreviousPage,
    onRow = _ref.onRow,
    onCell = _ref.onCell,
    onChange = _ref.onChange,
    onFilters = _ref.onFilters,
    onPageChange = _ref.onPageChange,
    _ref$showFilters = _ref.showFilters,
    showFilters = _ref$showFilters === void 0 ? false : _ref$showFilters,
    _ref$stickyHeader = _ref.stickyHeader,
    stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
    _ref$textPlaceholder = _ref.textPlaceholder,
    textPlaceholder = _ref$textPlaceholder === void 0 ? false : _ref$textPlaceholder,
    onSelected = _ref.onSelected,
    dataLength = _ref.dataLength,
    viewLength = _ref.viewLength,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? 'default' : _ref$loading,
    _ref$isLoading = _ref.isLoading,
    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
    containerStyle = _ref.containerStyle,
    _ref$rowErrors = _ref.rowErrors,
    rowErrors = _ref$rowErrors === void 0 ? new Map() : _ref$rowErrors,
    _ref$rowClassName = _ref.rowClassName,
    rowClassName = _ref$rowClassName === void 0 ? function () {
      return '';
    } : _ref$rowClassName,
    props = _objectWithoutProperties(_ref, _excluded);
  /* eslint-enable @typescript-eslint/no-unused-vars */
  var _useScale = useScale(),
    SCALES = _useScale.SCALES;
  var theme = useTheme();
  var ref = useRef(null);
  var _useRealShape = useRealShape(ref),
    _useRealShape2 = _slicedToArray(_useRealShape, 2),
    width = _useRealShape2[0].width,
    updateShape = _useRealShape2[1];
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    columns = _useState2[0],
    setColumns = _useState2[1];
  var _useState3 = useState(initialData),
    _useState4 = _slicedToArray(_useState3, 2),
    data = _useState4[0],
    setData = _useState4[1];
  var updateColumn = function updateColumn(column) {
    setColumns(function (last) {
      var hasColumn = last.find(function (item) {
        return item.prop === column.prop;
      });
      if (!hasColumn) return [].concat(_toConsumableArray(last), [column]);
      return last.map(function (item) {
        if (item.prop !== column.prop) return item;
        return column;
      });
    });
  };
  var contextValue = useMemo(function () {
    return {
      columns: columns,
      updateColumn: updateColumn
    };
  }, [columns]);
  useEffect(function () {
    if (typeof customData === 'undefined') return;
    setData(customData);
  }, [customData]);
  useResize(function () {
    return updateShape();
  });

  // Function to calculate start and end index for a given page
  var getDataRange = function getDataRange(pageNumber, itemsPerPage, dataLength) {
    var startIndex = (pageNumber - 1) * itemsPerPage;
    var endIndex = Math.min(startIndex + itemsPerPage - 1, dataLength - 1);
    return {
      startIndex: startIndex,
      endIndex: endIndex
    };
  };
  return /*#__PURE__*/React.createElement(TableContext.Provider, {
    value: contextValue
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      borderBottom: "1px solid ".concat(theme.palette.border),
      borderBottomLeftRadius: '5px',
      borderBottomRightRadius: '5px'
    },
    className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
  }, /*#__PURE__*/React.createElement("div", {
    style: _extends({
      overflow: 'auto'
    }, containerStyle),
    className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
  }, /*#__PURE__*/React.createElement("table", _extends({
    ref: ref
  }, props, {
    className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]]) + " " + (props && props.className != null && props.className || className || "")
  }), /*#__PURE__*/React.createElement(TableHead, {
    stickyHeader: stickyHeader,
    onFilters: onFilters,
    showFilters: showFilters,
    columns: columns,
    width: width
  }), !isLoading && /*#__PURE__*/React.createElement(TableBody, {
    data: data,
    hover: hover,
    emptyText: emptyText,
    onRow: onRow,
    onCell: onCell,
    isLoading: loading === "skeleton" && isLoading,
    rowErrors: rowErrors
    // textPlaceholder={textPlaceholder}
    ,
    rowClassName: rowClassName,
    rowDraggable: rowDraggable,
    readOnly: readOnly,
    onSelected: onSelected
  }), children), loading === "default" && isLoading ? /*#__PURE__*/React.createElement(Loading, null) : null, data.length == 0 && !isLoading ? /*#__PURE__*/React.createElement(Placeholder, {
    height: "90%",
    empty: true,
    textOnly: textPlaceholder,
    msg: "No Data to show"
  }) : null), cursorPagination || viewLength ? /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]]) + " " + "table-footer"
  }, cursorPagination && /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: 10
    },
    className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
  }, /*#__PURE__*/React.createElement(Tooltip.Small, {
    text: "Previous",
    type: "dark"
  }, /*#__PURE__*/React.createElement(Button, {
    disabled: !previousCursor,
    onClick: function onClick() {
      return onPreviousPage && onPreviousPage(previousCursor);
    },
    auto: true,
    px: 0.6,
    scale: 2 / 3,
    iconRight: /*#__PURE__*/React.createElement(ChevronLeft, null)
  })), /*#__PURE__*/React.createElement(Tooltip.Small, {
    text: "Next",
    type: "dark"
  }, /*#__PURE__*/React.createElement(Button, {
    disabled: !nextCursor || isLoading,
    onClick: function onClick() {
      return onNextPage && onNextPage(nextCursor);
    },
    auto: true,
    px: 0.6,
    scale: 2 / 3,
    iconRight: isLoading ? /*#__PURE__*/React.createElement(Loading, {
      width: "20px",
      height: "20px"
    }) : /*#__PURE__*/React.createElement(ChevronRight, null)
  }))), dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement(Pagination, {
    style: {
      marginLeft: '10px',
      marginRight: '10px'
    },
    onChange: function onChange(pageNumber) {
      // Get the range for the current page
      var _getDataRange = getDataRange(pageNumber, viewLength, dataLength),
        startIndex = _getDataRange.startIndex,
        endIndex = _getDataRange.endIndex;
      onPageChange(pageNumber, startIndex, endIndex);
    },
    limit: 5,
    count: Number(dataLength / viewLength)
  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null))) : null) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "638332526",
    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]
  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.table-footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:").concat(theme.palette.background, ";width:100%;bottom:0;padding:10px;}"))));
}
TableComponent.displayName = 'Table';
TableComponent.Column = TableColumn;
var Table = withScale(TableComponent);
Table.Column = TableColumn;
export default Table;