import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { usePagination, useSortBy, useTable } from 'react-table';
import makeData, { sampleColumns } from './makeData';
import markdown from './README.mdx';
import Table from './Table';
import TableSorting from './TableSorting';
import Pagination from '../Pagination';
export default {
  title: 'Components/UI Elements/Table',
  component: Table,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown
  }
};

function ReactTable(_ref) {
  var columns = _ref.columns,
      data = _ref.data,
      withBorder = _ref.withBorder;

  // Use the state and functions returned from useTable to build your UI
  var _useTable = useTable({
    columns: columns,
    data: data
  }),
      getTableProps = _useTable.getTableProps,
      getTableBodyProps = _useTable.getTableBodyProps,
      headerGroups = _useTable.headerGroups,
      rows = _useTable.rows,
      prepareRow = _useTable.prepareRow; // Render the UI for your table


  return /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
    withBorder: withBorder
  }), /*#__PURE__*/React.createElement("thead", null, headerGroups.map(function (headerGroup) {
    return /*#__PURE__*/React.createElement("tr", headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
      return /*#__PURE__*/React.createElement("th", column.getHeaderProps(), column.render('Header'));
    }));
  })), /*#__PURE__*/React.createElement("tbody", getTableBodyProps(), rows.map(function (row, i) {
    prepareRow(row);
    return /*#__PURE__*/React.createElement("tr", row.getRowProps(), row.cells.map(function (cell) {
      return /*#__PURE__*/React.createElement("td", cell.getCellProps(), cell.render('Cell'));
    }));
  })));
}

function ReactTablePagination(_ref2) {
  var columns = _ref2.columns,
      data = _ref2.data,
      withBorder = _ref2.withBorder;

  // Use the state and functions returned from useTable to build your UI
  var _useTable2 = useTable({
    columns: columns,
    data: data,
    initialState: {
      pageIndex: 2
    }
  }, usePagination),
      getTableProps = _useTable2.getTableProps,
      getTableBodyProps = _useTable2.getTableBodyProps,
      headerGroups = _useTable2.headerGroups,
      prepareRow = _useTable2.prepareRow,
      page = _useTable2.page,
      canPreviousPage = _useTable2.canPreviousPage,
      canNextPage = _useTable2.canNextPage,
      pageCount = _useTable2.pageCount,
      gotoPage = _useTable2.gotoPage,
      setPageSize = _useTable2.setPageSize,
      _useTable2$state = _useTable2.state,
      pageIndex = _useTable2$state.pageIndex,
      pageSize = _useTable2$state.pageSize;

  var changePage = function changePage(page) {
    gotoPage(page.page - 1); // Update PageSize

    if (pageSize !== page.pageSize) {
      setPageSize(page.pageSize);
    }
  }; // Render the UI for your table


  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, JSON.stringify({
    pageIndex: pageIndex,
    pageSize: pageSize,
    pageCount: pageCount,
    canNextPage: canNextPage,
    canPreviousPage: canPreviousPage
  }, null, 2))), /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
    withBorder: withBorder
  }), /*#__PURE__*/React.createElement("thead", null, headerGroups.map(function (headerGroup) {
    return /*#__PURE__*/React.createElement("tr", headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
      return /*#__PURE__*/React.createElement("th", column.getHeaderProps(), column.render('Header'));
    }));
  })), /*#__PURE__*/React.createElement("tbody", getTableBodyProps(), page.map(function (row, i) {
    prepareRow(row);
    return /*#__PURE__*/React.createElement("tr", row.getRowProps(), row.cells.map(function (cell) {
      return /*#__PURE__*/React.createElement("td", cell.getCellProps(), cell.render('Cell'));
    }));
  }))), /*#__PURE__*/React.createElement(Pagination, {
    pageSize: pageSize,
    pageSizes: [10, 20, 30],
    page: pageIndex + 1,
    totalItems: data.length,
    onChange: changePage
  }));
}

function ReactTableSorting(_ref3) {
  var columns = _ref3.columns,
      data = _ref3.data,
      withBorder = _ref3.withBorder;

  var _useTable3 = useTable({
    columns: columns,
    data: data,
    initialState: {
      sortBy: [{
        id: 'age',
        desc: false
      }]
    }
  }, useSortBy),
      getTableProps = _useTable3.getTableProps,
      getTableBodyProps = _useTable3.getTableBodyProps,
      headerGroups = _useTable3.headerGroups,
      rows = _useTable3.rows,
      prepareRow = _useTable3.prepareRow;

  return /*#__PURE__*/React.createElement(Table, getTableProps(), /*#__PURE__*/React.createElement("thead", null, headerGroups.map(function (headerGroup) {
    return /*#__PURE__*/React.createElement("tr", headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
      return (
        /*#__PURE__*/
        // Add the sorting props to control sorting. For this example
        // we can add them into the header props
        React.createElement("th", column.getHeaderProps(column.getSortByToggleProps()), column.render('Header'), /*#__PURE__*/React.createElement(TableSorting, column))
      );
    }));
  })), /*#__PURE__*/React.createElement("tbody", getTableBodyProps(), rows.map(function (row, i) {
    prepareRow(row);
    return /*#__PURE__*/React.createElement("tr", row.getRowProps(), row.cells.map(function (cell) {
      return /*#__PURE__*/React.createElement("td", cell.getCellProps(), cell.render('Cell'));
    }));
  })));
}

export var Regular = function Regular(args) {
  return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Header content 1"), /*#__PURE__*/React.createElement("th", null, "Header content 2"))), /*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Footer content 1"), /*#__PURE__*/React.createElement("td", null, "Footer content 2"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Body content 1"), /*#__PURE__*/React.createElement("td", null, "Body content 2"))));
};
export var UsingReactTable = function UsingReactTable(args) {
  console.log(ReactTable.toString());
  var columns = React.useMemo(function () {
    return sampleColumns;
  }, []);
  var data = React.useMemo(function () {
    return makeData(3);
  }, []);
  return /*#__PURE__*/React.createElement(ReactTable, _extends({}, args, {
    columns: columns,
    data: data
  }));
};
var text = "\nWe recommend [React-Table](https://github.com/react-tools/react-table) for tables with additional complexity. If you need Excel like features like cell editing row selection and copy/paste we recommend [ag-grid](https://www.ag-grid.com/).\n";
UsingReactTable.story = {
  parameters: {
    docs: {
      storyDescription: text
    }
  }
};
export var TableSortingHeader = function TableSortingHeader(args) {
  var columns = React.useMemo(function () {
    return sampleColumns;
  }, []);
  var data = React.useMemo(function () {
    return makeData(8);
  }, []);
  return /*#__PURE__*/React.createElement(ReactTableSorting, _extends({}, args, {
    columns: columns,
    data: data
  }));
};
TableSortingHeader.story = {
  parameters: {
    docs: {
      storyDescription: "Sorting"
    }
  }
};
export var TablePagination = function TablePagination(args) {
  var columns = React.useMemo(function () {
    return sampleColumns;
  }, []);
  var data = React.useMemo(function () {
    return makeData(25);
  }, []);
  return /*#__PURE__*/React.createElement(ReactTablePagination, _extends({}, args, {
    columns: columns,
    data: data
  }));
};
var hello = "\nTo use the custom Pagination you can use the TablePagination component. Additional props for the TablePagination can be directly added to the `ReactTable` component (see Pagination component).\n\n\n```js\nimport { TablePagination } from '@wfp/ui';\n\n// Replacing the Pagination Component of React-Table\n\n<ReactTable\n  {...yourTableProps}\n  PaginationComponent={TablePagination}\n  {...otherPropsForThePaginationToo}\n/>\n```\n";
TablePagination.story = {
  parameters: {
    docs: {
      storyDescription: hello
    }
  }
};