"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Pagination = void 0;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _jwPaginate = _interopRequireDefault(require("jw-paginate"));

var _box = require("../atoms/box");

var _button = require("../atoms/button");

var _icon = require("../atoms/icon");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const PaginationLink = (0, _styledComponents.default)(_button.Button).attrs(props => ({
  size: 'icon',
  variant: props.variant ? props.variant : 'text'
})).withConfig({
  displayName: "pagination__PaginationLink",
  componentId: "mldysb-0"
})(["min-width:28px;height:28px;line-height:12px;padding:3px 6px;text-align:center;"]);
const PaginationWrapper = (0, _styledComponents.default)(_box.Box).withConfig({
  displayName: "pagination__PaginationWrapper",
  componentId: "mldysb-1"
})(["display:inline-block;padding:2px;border:1px solid ", ";& >:first-child{width:56px;border-right:1px solid ", ";}& >:nth-child(2){padding-left:16px;}& >:last-child{width:56px;border-left:1px solid ", ";}& >:nth-last-child(2){padding-right:16px;}"], ({
  theme
}) => theme.colors.greyPale, ({
  theme
}) => theme.colors.greyPale, ({
  theme
}) => theme.colors.greyPale);
/**
 * Pagination component
 *
 * @component
 * @subcategory Molecules
 * @example
 * const location = { search: ''}
 * return (
 *   <Text py="xl" textAlign="center">
 *     <Pagination
 *      total={100}
 *      page={4}
 *      perPage={10}
 *      location={location}
 *      onChange={(item) => alert(`clicked ${item}`)}
 *   />
 *   </Text>
 * )
 */

const Pagination = props => {
  const {
    total,
    page,
    perPage,
    onChange,
    ...rest
  } = props;
  const currentPage = page || 1;
  const paginate = (0, _jwPaginate.default)(total, currentPage, perPage);
  const isFirstPage = currentPage === paginate.startPage;
  const isLastPage = currentPage === paginate.endPage;
  const prevPage = isFirstPage ? currentPage : currentPage - 1;
  const nextPage = isLastPage ? currentPage : currentPage + 1;

  if (paginate.totalPages === 1 || total === 0) {
    return null;
  }

  return _react.default.createElement(PaginationWrapper, rest, _react.default.createElement(PaginationLink, {
    disabled: isFirstPage,
    onClick: () => !isFirstPage ? onChange(prevPage) : undefined
  }, _react.default.createElement(_icon.Icon, {
    icon: "ChevronLeft"
  })), paginate.pages.map(p => _react.default.createElement(PaginationLink, {
    key: p,
    onClick: () => onChange(p),
    variant: p === currentPage ? 'primary' : 'text'
  }, p)), _react.default.createElement(PaginationLink, {
    onClick: () => !isLastPage ? onChange(nextPage) : undefined,
    disabled: isLastPage
  }, _react.default.createElement(_icon.Icon, {
    icon: "ChevronRight"
  })));
};

exports.Pagination = Pagination;
var _default = Pagination;
exports.default = _default;