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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { Link } from '@sentecacommerce-theme/lib';
import { useRouter } from 'next/router';
import { Typography } from '../../../../../Common';
export var Pagination = (_ref) => {
  var {
    lastPage,
    currentPage,
    canGoToNextPage,
    canGoToPrevPage
  } = _ref;
  var router = useRouter();
  var pagesArray = lastPage && new Array(lastPage).fill(1).map((_, i) => i + 1);
  var arePrevDotsRendered = false;
  var areNextDotsRendered = false;
  var query = {};
  if (router.query.slug) query.slug = router.query.slug;
  return /*#__PURE__*/React.createElement(Container, null, pagesArray ? pagesArray.map((el, index) => {
    if (el !== 1 && el < currentPage - 2) {
      if (arePrevDotsRendered) return null;
      arePrevDotsRendered = true;
      return /*#__PURE__*/React.createElement(Dots, {
        key: "Dots__" + el
      }, "...");
    }

    if (el !== lastPage && el > currentPage + 2) {
      if (areNextDotsRendered) return null;
      areNextDotsRendered = true;
      return /*#__PURE__*/React.createElement(Dots, {
        key: "Dots__" + el + "--" + index
      }, "...");
    }

    return /*#__PURE__*/React.createElement(Link, {
      key: "Link__" + index + "--" + el,
      href: {
        pathname: router.pathname || '',
        query: _extends({}, router.query || {}, {
          page: el
        })
      },
      passHref: true
    }, /*#__PURE__*/React.createElement(PageNumber, {
      current: el === currentPage
    }, /*#__PURE__*/React.createElement(NumberContainer, null, el)));
  }) : null);
};
var Container = styled.div.attrs({
  className: 'd-flex mt-3 mb-5 align-items-center align-self-end'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var PageNumber = styled(Typography).attrs({
  color: 'primary',
  variant: 7,
  as: 'span'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  min-width: 3rem;\n  min-height: 3rem;\n  border-radius: 0.3rem;\n  cursor: pointer;\n  margin: 0 0.25rem;\n  font-weight: bold;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: -0.66rem;\n    left: 25%;\n    width: 50%;\n    height: 0.4rem;\n    background-color: ", ";\n  }\n\n  @media (min-width: ", ") {\n    margin: 0 0.5rem;\n  }\n"])), (_ref2) => {
  var {
    theme,
    current
  } = _ref2;
  return current ? theme.palette.primary : 'initial';
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.lg.min;
});
var Dots = styled.div.attrs({
  className: 'd-md-block'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  min-width: 3rem;\n  min-height: 3rem;\n  margin: 0 0.25rem;\n  pointer-events: none;\n  font-weight: bold;\n  text-align: center;\n"])));
var NumberContainer = styled.div.attrs({
  className: ''
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  line-height: 1;\n\n  ", ":hover & {\n    text-decoration: underline !important;\n  }\n"])), PageNumber);
//# sourceMappingURL=index.js.map