import React from 'react';
import PropTypes from 'prop-types';
import is from 'is';
import './style.css';

var Pagination = function Pagination(props) {
  var prev = props.prev,
      next = props.next,
      pages = props.pages;


  var handleClick = function handleClick(event, handleAnchorClick) {
    event.preventDefault();
    if (is.fn(handleClick)) {
      handleAnchorClick(event);
    }
  };

  var handleKeyDown = function handleKeyDown(event, handleAnchorClick) {
    if (event.key === ' ' && is.fn(handleClick)) {
      event.preventDefault();
      handleAnchorClick(event);
    }
  };

  return React.createElement(
    'div',
    { className: 'ma__pagination js-pagination', role: 'navigation', 'aria-label': 'Pagination Navigation' },
    React.createElement(
      'nav',
      { className: 'ma__pagination__container' },
      !prev.hide &&
      // eslint-disable-next-line jsx-a11y/anchor-is-valid
      React.createElement(
        'a',
        {
          className: 'ma__pagination__prev ' + (prev.disabled && ' disabled'),
          role: 'button',
          href: '#',
          onClick: function onClick(e) {
            return handleClick(e, prev.onClick);
          },
          onKeyDown: function onKeyDown(e) {
            return handleKeyDown(e, prev.onClick);
          },
          'aria-label': 'Go to ' + prev.text + ' page',
          'aria-disabled': prev.disabled,
          tabIndex: prev.disabled ? -1 : 0
        },
        prev.text
      ),
      pages.map(function (page, pageIndex) {
        var key = 'pagination.item.' + pageIndex;
        return page.text === 'spacer' ? React.createElement(
          'span',
          { key: key, className: 'ma__pagination__spacer' },
          '\u2026'
        ) :
        // eslint-disable-next-line jsx-a11y/anchor-is-valid
        React.createElement(
          'a',
          {
            className: page.active ? 'ma__pagination__page is-active' : 'ma__pagination__page',
            role: 'button',
            href: '#',
            'data-page': page.text,
            onClick: function onClick(e) {
              return handleClick(e, page.onClick);
            },
            onKeyDown: function onKeyDown(e) {
              return handleKeyDown(e, page.onClick);
            },
            key: key,
            'aria-label': 'Go to Page ' + page.text,
            tabIndex: 0
          },
          page.text
        );
      }),
      !next.hide &&
      // eslint-disable-next-line jsx-a11y/anchor-is-valid
      React.createElement(
        'a',
        {
          className: 'ma__pagination__next ' + (next.disabled && ' disabled'),
          role: 'button',
          href: '#',
          onClick: function onClick(e) {
            return handleClick(e, next.onClick);
          },
          onKeyDown: function onKeyDown(e) {
            return handleKeyDown(e, next.onClick);
          },
          'aria-label': 'Go to ' + next.text + ' page',
          'aria-disabled': next.disabled,
          tabIndex: next.disabled ? -1 : 0
        },
        next.text
      )
    )
  );
};

Pagination.propTypes = process.env.NODE_ENV !== "production" ? {
  /** next.disabled: Defines whether the next button is available or not to users.
      next.text: Defines the text shown for the next button. */
  next: PropTypes.shape({
    disabled: PropTypes.bool,
    text: PropTypes.string.isRequired,
    hide: PropTypes.bool,
    onClick: PropTypes.func
  }),
  /** prev.disabled: Defines whether the prev button is available or not to users.
      prev.text: Defines the text shown for the previous button. */
  prev: PropTypes.shape({
    disabled: PropTypes.bool,
    text: PropTypes.string.isRequired,
    hide: PropTypes.bool,
    onClick: PropTypes.func
  }),
  /** Pages is an array that defines what page numbers users are able to paginate through.
      pages.active: Defines whether the page number is active or not.
      pages.text: Defines the text shown for page number. */
  pages: PropTypes.arrayOf(PropTypes.shape({
    active: PropTypes.bool,
    text: PropTypes.string.isRequired,
    hide: PropTypes.bool,
    onClick: PropTypes.func
  }))
} : {};

export default Pagination;