'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.from.js');
require('core-js/modules/es.number.constructor.js');
require('core-js/modules/es.string.iterator.js');
var React = require('react');
var PropTypes = require('prop-types');
var classnames = require('classnames');
var Settings = require('../../../constants/Settings.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);

var prefix = Settings.settings.prefix;
var propTypes = {
  /** current page number */
  page: PropTypes__default.default.number.isRequired,
  /** total number of pages */
  numPages: PropTypes__default.default.number.isRequired,
  /** call back function receive current page number */
  onChange: PropTypes__default.default.func.isRequired,
  /** i18n strings */
  i18n: PropTypes__default.default.shape({
    ariaLabelPreviousPage: PropTypes__default.default.string,
    ariaLabelNextPage: PropTypes__default.default.string,
    ariaLabelPagination: PropTypes__default.default.string,
    ariaLabelPage: PropTypes__default.default.string,
    ariaLabelSelect: PropTypes__default.default.string
  }),
  testId: PropTypes__default.default.string
};
var defaultProps = {
  i18n: {
    ariaLabelPreviousPage: 'Previous page',
    ariaLabelNextPage: 'Next page',
    ariaLabelPagination: 'pagination',
    ariaLabelPage: 'page',
    ariaLabelSelect: 'select page number'
  },
  testId: 'tile-pagination'
};
var TilePagination = function TilePagination(_ref) {
  var page = _ref.page,
    numPages = _ref.numPages,
    _onChange = _ref.onChange,
    i18n = _ref.i18n,
    testId = _ref.testId;
  var _useState = React.useState(),
    _useState2 = _slicedToArray__default.default(_useState, 2),
    selectedValue = _useState2[0],
    setSelectedValue = _useState2[1];
  var getPageButton = function getPageButton(pageNumber) {
    return /*#__PURE__*/React__default.default.createElement("button", {
      type: "button",
      onClick: function onClick() {
        return _onChange(pageNumber);
      },
      className: classnames__default.default("".concat(prefix, "--pagination-nav__page"), _defineProperty__default.default(_defineProperty__default.default({}, "".concat(prefix, "--pagination-nav__page--active"), page === pageNumber), "".concat(prefix, "--pagination-nav__page--disabled"), page === pageNumber)),
      "aria-current": i18n.ariaLabelPage,
      "aria-disabled": page === pageNumber,
      "data-testid": "".concat(testId, "-page-").concat(pageNumber, "-button")
    }, /*#__PURE__*/React__default.default.createElement("span", {
      className: "".concat(prefix, "--pagination-nav__accessibility-label")
    }, i18n.ariaLabelPage), pageNumber);
  };
  var getPageSelect = function getPageSelect(pageNumber, accumulator) {
    return /*#__PURE__*/React__default.default.createElement("li", {
      className: "".concat(prefix, "--pagination-nav__list-item")
    }, /*#__PURE__*/React__default.default.createElement("div", {
      className: "".concat(prefix, "--pagination-nav__select")
    }, /*#__PURE__*/React__default.default.createElement("select", {
      className: "".concat(prefix, "--pagination-nav__page ").concat(prefix, "--pagination-nav__page--select"),
      "data-page-select": true,
      value: selectedValue,
      "aria-label": i18n.ariaLabelSelect,
      onChange: function onChange(evt) {
        _onChange(Number(evt.target.value));
        setSelectedValue('default');
      },
      "data-testid": "".concat(testId, "-page-select")
    }, /*#__PURE__*/React__default.default.createElement("option", {
      value: "default",
      hidden: true,
      "data-page": ""
    }), Array.from({
      length: pageNumber
    }, function (v, i) {
      return /*#__PURE__*/React__default.default.createElement("option", {
        key: "TilePagination-option-".concat(i + accumulator),
        value: i + accumulator,
        "data-page": i + accumulator
      }, i + accumulator);
    })), /*#__PURE__*/React__default.default.createElement("div", {
      className: "".concat(prefix, "--pagination-nav__select-icon-wrapper")
    }, /*#__PURE__*/React__default.default.createElement("svg", {
      focusable: "false",
      preserveAspectRatio: "xMidYMid meet",
      xmlns: "http://www.w3.org/2000/svg",
      className: "".concat(prefix, "--pagination-nav__select-icon"),
      width: "16",
      height: "16",
      viewBox: "0 0 32 32",
      "aria-hidden": "true"
    }, /*#__PURE__*/React__default.default.createElement("circle", {
      cx: "8",
      cy: "16",
      r: "2"
    }), /*#__PURE__*/React__default.default.createElement("circle", {
      cx: "16",
      cy: "16",
      r: "2"
    }), /*#__PURE__*/React__default.default.createElement("circle", {
      cx: "24",
      cy: "16",
      r: "2"
    })))));
  };

  // maximum of how many page buttons to show
  var maxPageButtonsToShow = 7;
  // how many page buttons to show from the beginning before move to overflow menu
  var frontThreshold = 4;
  // how many page buttons to show from the end before move to overflow menu
  var backThreshold = 4;
  var isLargeNumberOfButtons = numPages > maxPageButtonsToShow;
  // if page number in first 4 numbers, do not show front overflow menu
  var showFrontOverFlowMenu = isLargeNumberOfButtons && page > frontThreshold;
  // if page number in last 4 numbers, do not show back overflow menu
  var showBackOverFlowMenu = isLargeNumberOfButtons && page < numPages - backThreshold + 1;
  var getPageNumberButtons = function getPageNumberButtons() {
    var buttons = [];
    if (!isLargeNumberOfButtons) {
      buttons = Array.from({
        length: numPages - 2
      }, function (v, i) {
        return /*#__PURE__*/React__default.default.createElement("li", {
          key: "TilePagination-page-number-button-".concat(i + 2),
          className: "".concat(prefix, "--pagination-nav__list-item")
        }, getPageButton(i + 2));
      });
    }
    if (!showFrontOverFlowMenu && showBackOverFlowMenu) {
      buttons = Array.from({
        length: 4
      }, function (v, i) {
        return /*#__PURE__*/React__default.default.createElement("li", {
          key: "TilePagination-page-number-button-".concat(i + 2),
          className: "".concat(prefix, "--pagination-nav__list-item")
        }, getPageButton(i + 2));
      });
    }
    if (showFrontOverFlowMenu && showBackOverFlowMenu) {
      buttons = [/*#__PURE__*/React__default.default.createElement("li", {
        key: "TilePagination-page-number-button-".concat(page - 1),
        className: "".concat(prefix, "--pagination-nav__list-item")
      }, getPageButton(page - 1)), /*#__PURE__*/React__default.default.createElement("li", {
        key: "TilePagination-page-number-button-".concat(page),
        className: "".concat(prefix, "--pagination-nav__list-item")
      }, getPageButton(page)), /*#__PURE__*/React__default.default.createElement("li", {
        key: "TilePagination-page-number-button-".concat(page + 1),
        className: "".concat(prefix, "--pagination-nav__list-item")
      }, getPageButton(page + 1))];
    }
    if (showFrontOverFlowMenu && !showBackOverFlowMenu) {
      buttons = [/*#__PURE__*/React__default.default.createElement("li", {
        key: "TilePagination-page-number-button-".concat(numPages - 4),
        className: "".concat(prefix, "--pagination-nav__list-item")
      }, getPageButton(numPages - 4)), /*#__PURE__*/React__default.default.createElement("li", {
        key: "TilePagination-page-number-button-".concat(numPages - 3),
        className: "".concat(prefix, "--pagination-nav__list-item")
      }, getPageButton(numPages - 3)), /*#__PURE__*/React__default.default.createElement("li", {
        key: "TilePagination-page-number-button-".concat(numPages - 2),
        className: "".concat(prefix, "--pagination-nav__list-item")
      }, getPageButton(numPages - 2)), /*#__PURE__*/React__default.default.createElement("li", {
        key: "TilePagination-page-number-button-".concat(numPages - 1),
        className: "".concat(prefix, "--pagination-nav__list-item")
      }, getPageButton(numPages - 1))];
    }
    return buttons;
  };
  var getFrontOverFlowMenu = function getFrontOverFlowMenu() {
    return showBackOverFlowMenu ? getPageSelect(page - 3, 2) : getPageSelect(numPages - 6, 2);
  };
  var getBackOverFlowMenu = function getBackOverFlowMenu() {
    return showFrontOverFlowMenu ? getPageSelect(numPages - page - 2, page + 2) : getPageSelect(numPages - 6, 6);
  };
  return /*#__PURE__*/React__default.default.createElement("nav", {
    className: "".concat(prefix, "--pagination-nav"),
    "aria-label": i18n.ariaLabelPagination
  }, /*#__PURE__*/React__default.default.createElement("ul", {
    className: "".concat(prefix, "--pagination-nav__list")
  }, /*#__PURE__*/React__default.default.createElement("li", {
    className: "".concat(prefix, "--pagination-nav__list-item")
  }, /*#__PURE__*/React__default.default.createElement("button", {
    type: "button",
    onClick: function onClick() {
      return page > 1 && _onChange(page - 1);
    },
    className: classnames__default.default("".concat(prefix, "--pagination-nav__page"), "".concat(prefix, "--pagination-nav__page--direction"), _defineProperty__default.default({}, "".concat(prefix, "--pagination-nav__page--disabled"), page === 1)),
    "aria-disabled": "true",
    "data-testid": "".concat(testId, "-backward-button")
  }, /*#__PURE__*/React__default.default.createElement("span", {
    className: "".concat(prefix, "--pagination-nav__accessibility-label")
  }, i18n.ariaLabelPreviousPage), /*#__PURE__*/React__default.default.createElement("svg", {
    focusable: "false",
    preserveAspectRatio: "xMidYMid meet",
    style: {
      willChange: 'transform'
    },
    xmlns: "http://www.w3.org/2000/svg",
    className: "".concat(prefix, "--pagination-nav__icon"),
    width: "5",
    height: "8",
    viewBox: "0 0 5 8",
    "aria-hidden": "true"
  }, /*#__PURE__*/React__default.default.createElement("path", {
    d: "M5 8L0 4 5 0z"
  })))), /*#__PURE__*/React__default.default.createElement("li", {
    className: "".concat(prefix, "--pagination-nav__list-item")
  }, getPageButton(1)), showFrontOverFlowMenu ? getFrontOverFlowMenu() : null, getPageNumberButtons(), showBackOverFlowMenu ? getBackOverFlowMenu() : null, numPages > 1 ? /*#__PURE__*/React__default.default.createElement("li", {
    className: "".concat(prefix, "--pagination-nav__list-item")
  }, getPageButton(numPages)) : null, /*#__PURE__*/React__default.default.createElement("li", {
    className: "".concat(prefix, "--pagination-nav__list-item")
  }, /*#__PURE__*/React__default.default.createElement("button", {
    type: "button",
    onClick: function onClick() {
      return page < numPages && _onChange(page + 1);
    },
    className: classnames__default.default("".concat(prefix, "--pagination-nav__page"), "".concat(prefix, "--pagination-nav__page--direction"), _defineProperty__default.default({}, "".concat(prefix, "--pagination-nav__page--disabled"), page === numPages)),
    "data-testid": "".concat(testId, "-foreward-button")
  }, /*#__PURE__*/React__default.default.createElement("span", {
    className: "".concat(prefix, "--pagination-nav__accessibility-label")
  }, i18n.ariaLabelNextPage), /*#__PURE__*/React__default.default.createElement("svg", {
    focusable: "false",
    preserveAspectRatio: "xMidYMid meet",
    style: {
      willChange: 'transform'
    },
    xmlns: "http://www.w3.org/2000/svg",
    className: "".concat(prefix, "--pagination-nav__icon"),
    width: "5",
    height: "8",
    viewBox: "0 0 5 8",
    "aria-hidden": "true"
  }, /*#__PURE__*/React__default.default.createElement("path", {
    d: "M0 0L5 4 0 8z"
  }))))));
};
TilePagination.propTypes = propTypes;
TilePagination.defaultProps = defaultProps;
TilePagination.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TilePagination",
  "props": {
    "i18n": {
      "defaultValue": {
        "value": "{\n  ariaLabelPreviousPage: 'Previous page',\n  ariaLabelNextPage: 'Next page',\n  ariaLabelPagination: 'pagination',\n  ariaLabelPage: 'page',\n  ariaLabelSelect: 'select page number',\n}",
        "computed": false
      },
      "description": "i18n strings",
      "type": {
        "name": "shape",
        "value": {
          "ariaLabelPreviousPage": {
            "name": "string",
            "required": false
          },
          "ariaLabelNextPage": {
            "name": "string",
            "required": false
          },
          "ariaLabelPagination": {
            "name": "string",
            "required": false
          },
          "ariaLabelPage": {
            "name": "string",
            "required": false
          },
          "ariaLabelSelect": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'tile-pagination'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "page": {
      "description": "current page number",
      "type": {
        "name": "number"
      },
      "required": true
    },
    "numPages": {
      "description": "total number of pages",
      "type": {
        "name": "number"
      },
      "required": true
    },
    "onChange": {
      "description": "call back function receive current page number",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var TilePagination$1 = TilePagination;

module.exports = TilePagination$1;
