import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import * as React from 'react';
import Pagination from '@mui/material/Pagination';
import Dropdown from '../../Dropdown/Dropdown/index.js';
import { TableWrapper, TableHeadingWrapper, TableHeaderHeadingWrapper, FilterContainer, FilterResultWrapper, FilterOptionsWrapper, FilterDropdownWrapper, FilterSearchWrapper, CustomTableContainer, DataGridWrapper, TablePaginationWrapper } from './style.js';
import { ThemeProvider } from 'styled-components';
import theme from '../../../Globals/theme.js';
import globalStyle from '../../../Globals/global-styles.js';
import SearchField from '../../SearchField/SearchField/index.js';
import { DataGrid, useGridApiContext, useGridSelector, gridPageSelector, gridPageCountSelector } from '@mui/x-data-grid';

function EnhancedTable(_ref) {
  var rows = _ref.rows,
      columns = _ref.columns,
      rowsPerPageOptions = _ref.rowsPerPageOptions,
      tableHeader = _ref.tableHeader,
      tableActions = _ref.tableActions;

  var _React$useState = React.useState(rowsPerPageOptions[0].options),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      rowsPerPage = _React$useState2[0],
      setRowsPerPage = _React$useState2[1];

  var _React$useState3 = React.useState(1),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      firstCount = _React$useState4[0],
      setFirstCount = _React$useState4[1];

  var _React$useState5 = React.useState(rowsPerPage),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      lastCount = _React$useState6[0],
      setLastCount = _React$useState6[1];

  var handleChangeRowsPerPage = function handleChangeRowsPerPage(selectedList, selectedItem) {
    console.log("selectedItem", selectedItem);
    setRowsPerPage(selectedItem.options);
    setLastCount(selectedItem.options);
  };

  var CustomPagination = function CustomPagination() {
    var apiRef = useGridApiContext();
    var page = useGridSelector(apiRef, gridPageSelector);
    var pageCount = useGridSelector(apiRef, gridPageCountSelector);

    var handleChangePage = function handleChangePage(event, newPage) {
      apiRef.current.setPage(newPage - 1);
      setFirstCount(newPage * rowsPerPage - (rowsPerPage - 1));
      setLastCount(newPage * rowsPerPage);
    };

    return /*#__PURE__*/React.createElement(TablePaginationWrapper, null, /*#__PURE__*/React.createElement(Pagination, {
      count: pageCount,
      page: page + 1,
      onChange: handleChangePage,
      variant: "outlined",
      shape: "rounded"
    }));
  };

  console.log("rowsPerPageOptions", rowsPerPageOptions);
  console.log("rowsPerPage", rowsPerPage);
  return /*#__PURE__*/React.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React.createElement(globalStyle, null), /*#__PURE__*/React.createElement(TableWrapper, null, /*#__PURE__*/React.createElement(TableHeadingWrapper, null, /*#__PURE__*/React.createElement(TableHeaderHeadingWrapper, null, tableHeader), tableActions), /*#__PURE__*/React.createElement(FilterContainer, null, /*#__PURE__*/React.createElement(FilterResultWrapper, null, "Showing Results ", firstCount, " - ", lastCount < rows.length ? lastCount : rows.length, " of ", rows.length, " Results"), /*#__PURE__*/React.createElement(FilterOptionsWrapper, null, /*#__PURE__*/React.createElement(FilterDropdownWrapper, null, /*#__PURE__*/React.createElement(Dropdown, {
    placeholder: rowsPerPage,
    items: rowsPerPageOptions,
    onChange: handleChangeRowsPerPage,
    value: rowsPerPage[0]
  })), /*#__PURE__*/React.createElement(FilterResultWrapper, null, "Results per page"), /*#__PURE__*/React.createElement(FilterSearchWrapper, null, /*#__PURE__*/React.createElement(SearchField, null)))), /*#__PURE__*/React.createElement(CustomTableContainer, null, /*#__PURE__*/React.createElement(DataGridWrapper, null, /*#__PURE__*/React.createElement(DataGrid, {
    autoHeight: true,
    rows: rows,
    columns: columns,
    pagination: true,
    pageSize: rowsPerPage,
    checkboxSelection: true,
    components: {
      Pagination: CustomPagination
    }
  })))));
}

export { EnhancedTable as default };
//# sourceMappingURL=index.js.map
