import React__default from 'react';
import ReactPaginate from 'react-paginate';
import Button from 'react-bootstrap/Button';
import { d as FaArrowRight, e as FaArrowLeft } from './index.esm-1bd8a0a8.js';

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,
      _props$needLargePagin = props.needLargePaginateButtons,
      needLargePaginateButtons = _props$needLargePagin === undefined ? false : _props$needLargePagin;

  if (!pageCount || pageCount <= 1) return null;
  return React__default.createElement(
    React__default.Fragment,
    null,
    needLargePaginateButtons && React__default.createElement(
      'div',
      { className: 'pagination-lg-btn-nxt' },
      React__default.createElement(
        Button,
        {
          onClick: function onClick(e) {
            e.preventDefault();
            _onPageChange(currentPage + 1);
          },
          disabled: currentPage === pageCount,
          href: currentPage === pageCount ? '' : '?page=' + (currentPage + 1) },
        'NEXT PAGE',
        React__default.createElement(FaArrowRight, { className: 'fa-arrow-right' })
      )
    ),
    React__default.createElement(ReactPaginate, {
      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: 'disabled',
      activeClassName: 'active'
    }),
    needLargePaginateButtons && React__default.createElement(
      'div',
      { className: 'pagination-lg-btn-prv' },
      React__default.createElement(
        Button,
        {
          onClick: function onClick(e) {
            e.preventDefault();
            _onPageChange(currentPage - 1);
          },
          disabled: currentPage === 1,
          href: currentPage <= 1 ? '?page=1' : '?page=' + (currentPage - 1) },
        React__default.createElement(FaArrowLeft, { className: 'fa-arrow-left' }),
        'PREVIOUS PAGE'
      )
    ),
    React__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 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 li:first-child a {\n          border-radius: 5px 0 0 5px;\n        }\n        .pagination-container li:last-child a {\n          border-radius: 0 5px 5px 0;\n        }\n        .pagination-container .disabled a {\n          cursor: default;\n        }\n        .pagination-lg-btn-nxt,\n        .pagination-lg-btn-prv {\n          text-align: center;\n        }\n        .pagination-lg-btn-nxt .btn,\n        .pagination-lg-btn-prv .btn {\n          min-width: 80%;\n          color: #000;\n          color: var(--primary);\n          background-color: transparent;\n          border-color: #000;\n          border-color: var(--primary);\n        }\n        .pagination-lg-btn-nxt {\n          margin: 0 0 1.5rem;\n        }\n        .pagination-lg-btn-prv {\n          margin: 1.5rem 0 0;\n        }\n        .pagination-lg-btn-nxt .btn:not(:disabled):not(.disabled).active,\n        .pagination-lg-btn-prv .btn:not(:disabled):not(.disabled):active {\n          color: #fff;\n          background-color: #000;\n          background-color: var(--primary);\n          border-color: #000;\n          border-color: var(--primary);\n        }\n        @media only screen and (min-width: 601px) {\n          [class^=\'pagination-lg-btn\'] {\n            display: none;\n          }\n        }\n        .fa-arrow-left {\n          margin-right: 0.5rem;\n        }\n        .fa-arrow-right {\n          margin-left: 0.5rem;\n        }\n        .pagination-container::-webkit-scrollbar {\n          height: 8px;\n        }\n        .pagination-container::-webkit-scrollbar-track,\n        .pagination-container::-webkit-scrollbar-thumb {\n          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);\n          border-radius: 4px;\n        }\n        .pagination-container::-webkit-scrollbar-track {\n          background-color: rgba(0, 0, 0, 0.1);\n        }\n        .pagination-container::-webkit-scrollbar-thumb {\n          background-color: rgba(0, 0, 0, 0.3);\n        }\n      '
    )
  );
};

export { Pagination as P };
