import React from 'react';
import { Flexbox, Typography } from '../../../index';
import PageItems from '../PageItems';
import ChevronIcon from './components/ChevronIcon';
import { StyledCurrentPageBox, StyledList, TruncatedPageNumbers, StyledButton } from './components/LargeComponents';
var PageItem = function PageItem(_ref) {
  var _ref$isCurrentPage = _ref.isCurrentPage,
    isCurrentPage = _ref$isCurrentPage === void 0 ? false : _ref$isCurrentPage,
    onClick = _ref.onClick,
    children = _ref.children,
    label = _ref.label;
  return React.createElement(Flexbox, {
    item: true,
    as: "li"
  }, isCurrentPage ? React.createElement(StyledCurrentPageBox, {
    container: true
  }, React.createElement(Typography, {
    type: "primary",
    color: function color(t) {
      return t.color.buttonText;
    },
    weight: "bold"
  }, children)) : React.createElement(StyledButton, {
    $type: "page-item",
    onClick: onClick,
    "aria-label": "".concat(label, " ").concat(children)
  }, React.createElement(Typography, {
    type: "primary",
    color: function color(t) {
      return t.color.text;
    },
    weight: "bold"
  }, children)));
};
var ChevronButton = function ChevronButton(_ref2) {
  var direction = _ref2.direction,
    onClick = _ref2.onClick,
    label = _ref2.label;
  return React.createElement(Flexbox, {
    item: true,
    container: true,
    alignItems: "center"
  }, React.createElement(StyledButton, {
    $type: "chevron",
    onClick: onClick,
    "aria-label": label
  }, React.createElement(ChevronIcon, {
    direction: direction,
    size: 16,
    inline: true
  })));
};
var Large = function Large(_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(Flexbox, {
    container: true
  }, currentPage !== 1 && React.createElement(ChevronButton, {
    direction: "left",
    onClick: onClickPrevious,
    label: previousPageLabel
  }), React.createElement(StyledList, {
    $numberOfPages: numberOfPages
  }, React.createElement(PageItems, {
    currentPage: currentPage,
    numberOfPages: numberOfPages,
    onClickPageItem: onClickPageItem,
    PageItem: PageItem,
    TruncatedPageNumbers: TruncatedPageNumbers,
    currentPageLabel: currentPageLabel,
    pageItemLabel: pageItemLabel
  })), currentPage !== numberOfPages && React.createElement(ChevronButton, {
    direction: "right",
    onClick: onClickNext,
    label: nextPageLabel
  }));
};
export default React.memo(Large);