import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _extends from "@babel/runtime/helpers/extends";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React from 'react';
import styled, { css } from 'styled-components';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { Typography, IconArrowLeft as Arrow } from '../../../Common';
import { PaginationPlaceholder } from '../PaginationPlaceholder';
import { useListingPagination } from '@sentecacommerce-theme/lib';
export var Pagination = () => {
  var router = useRouter();
  var {
    pagination,
    query,
    isLoading
  } = useListingPagination();
  if (pagination.totalPages === 0) return null;

  if (!pagination || isLoading) {
    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(PaginationPlaceholder, null));
  }

  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Link, {
    href: {
      pathname: router.pathname,
      query: _extends({}, query, pagination == null ? void 0 : pagination.previousQuery)
    },
    passHref: pagination.hasPrevious,
    prefetch: false
  }, /*#__PURE__*/React.createElement(PaginationDirection, {
    canBeActivated: pagination.hasPrevious
  }, /*#__PURE__*/React.createElement(Arrow, null))), /*#__PURE__*/React.createElement(CurrentPage, null, pagination == null ? void 0 : pagination.currentPage, " \u043E\u0442 ", pagination == null ? void 0 : pagination.totalPages), /*#__PURE__*/React.createElement(Link, {
    href: {
      pathname: router.pathname,
      query: _extends({}, query, pagination == null ? void 0 : pagination.nextQuery)
    },
    passHref: pagination.hasNext,
    prefetch: false
  }, /*#__PURE__*/React.createElement(PaginationDirection, {
    next: true,
    canBeActivated: pagination.hasNext
  }, /*#__PURE__*/React.createElement(Arrow, null))));
};
var PaginationDirection = styled.a.attrs(props => ({
  as: props.canBeActivated ? 'a' : 'div'
}))(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), props => props.canBeActivated ? props.theme.palette.primary : props.theme.palette.disabled, props => props.next && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      & svg {\n        transform: rotate(180deg);\n      }\n    "]))), props => !props.canBeActivated && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      box-shadow: none;\n      pointer-events: none;\n      & svg {\n        box-shadow: none;\n      }\n    "]))));
var CurrentPage = styled(Typography).attrs({
  color: 'primary',
  variant: 6,
  as: 'span',
  className: 'mx-4'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var Container = styled.div.attrs({
  className: 'mt-5'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
//# sourceMappingURL=index.js.map