'use strict';

var React = require('react');
var ReactPaginate = require('react-paginate');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var ReactPaginate__default = /*#__PURE__*/_interopDefaultLegacy(ReactPaginate);

var Pagination = function Pagination(props) {
  var pageCount = props.pageCount,
      _props$marginPagesDis = props.marginPagesDisplayed,
      marginPagesDisplayed = _props$marginPagesDis === undefined ? 1 : _props$marginPagesDis,
      _props$pageRangeDispl = props.pageRangeDisplayed,
      pageRangeDisplayed = _props$pageRangeDispl === undefined ? 5 : _props$pageRangeDispl,
      _props$currentPage = props.currentPage,
      currentPage = _props$currentPage === undefined ? 1 : _props$currentPage,
      _onPageChange = props.onPageChange;

  if (!pageCount || pageCount <= 1) return null;
  return React__default['default'].createElement(
    React__default['default'].Fragment,
    null,
    React__default['default'].createElement(ReactPaginate__default['default'], {
      pageCount: pageCount,
      marginPagesDisplayed: marginPagesDisplayed,
      pageRangeDisplayed: pageRangeDisplayed,
      forcePage: currentPage - 1,
      onPageChange: function onPageChange(_ref) {
        var selected = _ref.selected;
        return _onPageChange(selected + 1);
      },
      hrefBuilder: function hrefBuilder(page) {
        return '?page=' + page;
      },
      previousLabel: '<',
      nextLabel: '>',
      containerClassName: 'pagination-container',
      previousLinkClassName: 'previous',
      nextLinkClassName: 'next',
      disabledClassName: 'disbaled',
      activeClassName: 'active'
    }),
    React__default['default'].createElement(
      'style',
      { jsx: 'true' },
      '\n        .pagination-container {\n          list-style: none;\n          padding: 10px 0;\n          margin: 0;\n          display: flex;\n          overflow: auto;\n        }\n        .pagination-container::before,\n        .pagination-container::after {\n          content: \'\';\n          margin: 0 auto;\n        }\n        .pagination-container::-webkit-scrollbar {\n          height: 6px;\n        }\n        .pagination-container a {\n          padding: 10px;\n          border: 1px solid #dee2e6;\n        }\n        .pagination-container a:hover {\n          text-decoration: none;\n          background-color: #e9ecef;\n          border-color: #dee2e6;\n        }\n        .pagination-container .active a {\n          color: #fff;\n          background-color: #666;\n          background-color: var(--primary);\n        }\n        .pagination-container .previous a {\n          border-radius: 5px 0 0 5px;\n        }\n        .pagination-container .next a {\n          border-radius: 0 5px 5px 0;\n        }\n        .pagination-container .disbaled a {\n          cursor: default;\n        }\n      '
    )
  );
};

exports.Pagination = Pagination;
