"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.Pagination = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

var _link = _interopRequireDefault(require("next/link"));

var _router = require("next/router");

var _Common = require("../../../Common");

var _PaginationPlaceholder = require("../PaginationPlaceholder");

var _lib = require("@sentecacommerce-theme/lib");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var Pagination = function Pagination() {
  var router = (0, _router.useRouter)();

  var _useListingPagination = (0, _lib.useListingPagination)(),
      pagination = _useListingPagination.pagination,
      query = _useListingPagination.query,
      isLoading = _useListingPagination.isLoading;

  if (pagination.totalPages === 0) return null;

  if (!pagination || isLoading) {
    return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_PaginationPlaceholder.PaginationPlaceholder, null));
  }

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: {
      pathname: router.pathname,
      query: (0, _extends2["default"])({}, query, pagination == null ? void 0 : pagination.previousQuery)
    },
    passHref: pagination.hasPrevious,
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement(PaginationDirection, {
    canBeActivated: pagination.hasPrevious
  }, /*#__PURE__*/_react["default"].createElement(_Common.IconArrowLeft, null))), /*#__PURE__*/_react["default"].createElement(CurrentPage, null, pagination == null ? void 0 : pagination.currentPage, " \u043E\u0442 ", pagination == null ? void 0 : pagination.totalPages), /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: {
      pathname: router.pathname,
      query: (0, _extends2["default"])({}, query, pagination == null ? void 0 : pagination.nextQuery)
    },
    passHref: pagination.hasNext,
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement(PaginationDirection, {
    next: true,
    canBeActivated: pagination.hasNext
  }, /*#__PURE__*/_react["default"].createElement(_Common.IconArrowLeft, null))));
};

exports.Pagination = Pagination;

var PaginationDirection = _styledComponents["default"].a.attrs(function (props) {
  return {
    as: props.canBeActivated ? 'a' : 'div'
  };
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  line-height: 0;\n  text-decoration: none;\n  & svg {\n    color: ", ";\n    padding: 0.5rem;\n    width: 3rem;\n    height: 3rem;\n    opacity: 0.6;\n    &:hover {\n      opacity: 1;\n    }\n  }\n  ", "\n  ", "\n"])), function (props) {
  return props.canBeActivated ? props.theme.palette.primary : props.theme.palette.disabled;
}, function (props) {
  return props.next && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      & svg {\n        transform: rotate(180deg);\n      }\n    "])));
}, function (props) {
  return !props.canBeActivated && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      box-shadow: none;\n      pointer-events: none;\n      & svg {\n        box-shadow: none;\n      }\n    "])));
});

var CurrentPage = (0, _styledComponents["default"])(_Common.Typography).attrs({
  color: 'primary',
  variant: 6,
  as: 'span',
  className: 'mx-4'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Container = _styledComponents["default"].div.attrs({
  className: 'mt-5'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
//# sourceMappingURL=index.js.map