import React from 'react';
import { Button, Flexbox, Typography } from '../../../index';
import List from '../../../Atoms/List';
import PageItems from '../PageItems';
import ChevronIcon from './components/ChevronIcon';
import { StyledFlexbox, TruncatedPageNumbers } from './components/RegularComponents';
var PageNumberItem = function PageNumberItem(_ref) {
  var _ref$isCurrentPage = _ref.isCurrentPage,
    isCurrentPage = _ref$isCurrentPage === void 0 ? false : _ref$isCurrentPage,
    children = _ref.children,
    onClick = _ref.onClick,
    label = _ref.label;
  return React.createElement(Flexbox, {
    item: true,
    as: "li"
  }, isCurrentPage ? React.createElement(Typography, {
    type: "secondary",
    color: function color(t) {
      return t.color.cta;
    },
    weight: "bold"
  }, children) : React.createElement(Button, {
    variant: "neutral",
    onClick: onClick,
    "aria-label": "".concat(label, " ").concat(children)
  }, React.createElement(Typography, {
    type: "secondary",
    color: function color(t) {
      return t.color.text;
    },
    weight: "bold"
  }, children)));
};
var ChevronButton = function ChevronButton(_ref2) {
  var _ref2$direction = _ref2.direction,
    direction = _ref2$direction === void 0 ? 'left' : _ref2$direction,
    onClick = _ref2.onClick,
    label = _ref2.label;
  return React.createElement(Button, {
    variant: "neutral",
    onClick: onClick,
    "aria-label": label
  }, React.createElement(ChevronIcon, {
    direction: direction,
    size: 8
  }));
};
var Regular = function Regular(_ref3) {
  var currentPage = _ref3.currentPage,
    numberOfPages = _ref3.numberOfPages,
    onClickPageItem = _ref3.onClickPageItem,
    onClickPrevious = _ref3.onClickPrevious,
    onClickNext = _ref3.onClickNext,
    previousPageLabel = _ref3.previousPageLabel,
    nextPageLabel = _ref3.nextPageLabel,
    currentPageLabel = _ref3.currentPageLabel,
    pageItemLabel = _ref3.pageItemLabel;
  if (numberOfPages <= 1) {
    return null;
  }
  return React.createElement(StyledFlexbox, {
    container: true,
    $numberOfPages: numberOfPages
  }, currentPage !== 1 && React.createElement(ChevronButton, {
    direction: "left",
    onClick: onClickPrevious,
    label: previousPageLabel
  }), React.createElement(Flexbox, {
    container: true,
    item: true,
    flex: "1",
    justifyContent: "center",
    gap: 2,
    as: List
  }, React.createElement(PageItems, {
    currentPage: currentPage,
    numberOfPages: numberOfPages,
    onClickPageItem: onClickPageItem,
    PageItem: PageNumberItem,
    TruncatedPageNumbers: TruncatedPageNumbers,
    currentPageLabel: currentPageLabel,
    pageItemLabel: pageItemLabel
  })), currentPage !== numberOfPages && React.createElement(ChevronButton, {
    direction: "right",
    onClick: onClickNext,
    label: nextPageLabel
  }));
};
export default React.memo(Regular);