import React__default from 'react';
import '@emotion/core';
import { a as createCommonjsModule, g as getDefaultExportFromCjs } from './_commonjsHelpers-f108cd30.js';
import { a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-d84df351.js';
import { c as createIconComponent_1 } from './createIconComponent-c09f9274.js';
import { u as useCustomCss } from './utilities-357c56e6.js';

var rightArrow = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _createIconComponent = _interopRequireDefault(createIconComponent_1);

var _react = _interopRequireDefault(React__default);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var IconRightArrow = (0, _createIconComponent["default"])({
  content: _react["default"].createElement("g", null, _react["default"].createElement("path", {
    d: "M61.74 37.28L64 35 41.49 12.47a3.85 3.85 0 0 0-2.76-1.15A3.94 3.94 0 0 0 36 12.48 3.92 3.92 0 0 0 36 18l13.34 13.42H8.07a4 4 0 0 0-4.2 3.76 4 4 0 0 0 4.2 3.76H49L36 52a3.9 3.9 0 0 0 5.52 5.51L61.06 38a4.37 4.37 0 0 0 .68-.72z"
  })),
  height: undefined,
  width: undefined
});
IconRightArrow.displayName = 'IconRightArrow';
var _default = IconRightArrow;
exports["default"] = _default;
});

var RightArrow = /*@__PURE__*/getDefaultExportFromCjs(rightArrow);

var leftArrow = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _createIconComponent = _interopRequireDefault(createIconComponent_1);

var _react = _interopRequireDefault(React__default);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var IconLeftArrow = (0, _createIconComponent["default"])({
  content: _react["default"].createElement("g", null, _react["default"].createElement("path", {
    d: "M60.87 31.42H19.59L33 18a3.9 3.9 0 0 0 0-5.5 3.92 3.92 0 0 0-2.76-1.16 3.88 3.88 0 0 0-2.76 1.15L5 35l2.26 2.26a4.44 4.44 0 0 0 .69.68l19.5 19.59a3.9 3.9 0 0 0 2.76 1.15A3.86 3.86 0 0 0 33 57.53 3.9 3.9 0 0 0 33 52L20 38.92h40.87a4 4 0 0 0 4.2-3.76 4 4 0 0 0-4.2-3.74z"
  })),
  height: undefined,
  width: undefined
});
IconLeftArrow.displayName = 'IconLeftArrow';
var _default = IconLeftArrow;
exports["default"] = _default;
});

var LeftArrow = /*@__PURE__*/getDefaultExportFromCjs(leftArrow);

var PagingWidget = function (_a) {
    var _b = _a.currentPage, currentPage = _b === void 0 ? 1 : _b, _c = _a.totalPages, totalPages = _c === void 0 ? 1 : _c, onPageChange = _a.onPageChange, _d = _a.customCss, customCss = _d === void 0 ? '' : _d, userProvidedId = _a.id;
    var id = useId(userProvidedId);
    var resolvedCss = useCustomCss(customCss);
    var _e = React__default.useState(currentPage), activePage = _e[0], setPage = _e[1];
    var _f = React__default.useState(false), isEditing = _f[0], setIsEditing = _f[1];
    var _g = React__default.useState(null), dimensions = _g[0], setDimensions = _g[1];
    var _h = React__default.useState(false), isError = _h[0], setIsError = _h[1];
    var inputRef = React__default.createRef();
    var textWrapper = React__default.createRef();
    var next = function (e) {
        if (activePage !== totalPages) {
            var newPage = activePage + 1;
            setPage(newPage);
            if (onPageChange) {
                onPageChange(newPage, e);
            }
        }
    };
    var prev = function (e) {
        if (activePage !== 1) {
            var newPage = activePage - 1;
            setPage(newPage);
            if (onPageChange) {
                onPageChange(newPage, e);
            }
        }
    };
    var startEditing = function () {
        if (totalPages === 1) {
            return;
        }
        if (textWrapper.current) {
            var _a = textWrapper.current.getBoundingClientRect(), width = _a.width, height = _a.height;
            setDimensions({ width: width, height: height });
        }
        setIsEditing(true);
        var pageInput = inputRef.current;
        if (pageInput) {
            pageInput.focus();
        }
    };
    var stopEditing = function (e) {
        var _a;
        var prevPage = activePage;
        var newPage = parseInt(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || '');
        if (isValidPage(newPage)) {
            setPage(newPage);
            if (onPageChange) {
                onPageChange(newPage, e);
            }
        }
        else {
            setPage(prevPage);
            setIsError(true);
        }
        setIsEditing(false);
    };
    var isValidPage = function (page) {
        if (Number.isInteger(page) && page > 0 && page <= totalPages) {
            return true;
        }
        return false;
    };
    return (jsxs("div", { children: [jsx("link", { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" }, void 0),
            jsxs(StyledOuterDiv, __assign({ css: resolvedCss, id: id, "aria-labelledby": "paging-widget-label-" + id }, { children: [jsx(VisuallyHiddenDiv, __assign({ id: "paging-widget-label-" + id }, { children: "Paging Navigation. Current page: " + activePage + " of " + totalPages }), void 0),
                    isError && (jsxs(VisuallyHiddenDiv, __assign({ role: "alert" }, { children: ["The page entered is outside of the page range. Enter a page between 1 and ", totalPages] }), void 0)),
                    jsxs(VisuallyHiddenDiv, __assign({ "aria-live": "polite" }, { children: ["Now on page ", activePage, ";"] }), void 0),
                    jsx(StyledPagingButton, __assign({ onClick: prev, "aria-label": "Previous page" }, { children: jsx(StyledIconWrapper, { children: jsx(LeftArrow, {}, void 0) }, void 0) }), void 0),
                    jsx(StyledMiddleDiv, __assign({ onFocus: startEditing, tabIndex: isEditing ? undefined : 0 }, { children: jsxs("div", __assign({ ref: textWrapper }, { children: [jsx(StyledPageTextDiv, { children: "Page" }, void 0),
                                jsx(StyledPageNumbersDiv, { children: isEditing ? (jsx(StyledPageInput, { style: { width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width }, ref: inputRef, "aria-label": "current page: " + activePage + " of " + totalPages + ". Enter desired page.", type: "text", defaultValue: activePage, onKeyDown: function (e) {
                                            if (e.keyCode === 13) {
                                                stopEditing(e);
                                            }
                                        }, onBlur: stopEditing, autoFocus: true }, void 0)) : (activePage + " / " + totalPages) }, void 0)] }), void 0) }), void 0),
                    jsx(StyledPagingButton, __assign({ onClick: next, "aria-label": "Next page" }, { children: jsx(StyledIconWrapper, { children: jsx(RightArrow, {}, void 0) }, void 0) }), void 0)] }), void 0)] }, void 0));
};
var StyledOuterDiv = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 13;\n  display: flex;\n  flex-direction: row;\n"], ["\n  padding: 13;\n  display: flex;\n  flex-direction: row;\n"])));
var StyledPagingButton = styled('button')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: none;\n  outline: none;\n  height: 42px;\n  width: 42px;\n  border-radius: 8px;\n  background-color: #e0e0e0;\n  fill: #676767;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  border: none;\n  outline: none;\n  height: 42px;\n  width: 42px;\n  border-radius: 8px;\n  background-color: #e0e0e0;\n  fill: #676767;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.lighten('#e0e0e0', 3);
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var StyledIconWrapper = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  left: 5px;\n  width: 20px;\n  height: 20px;\n"], ["\n  position: relative;\n  left: 5px;\n  width: 20px;\n  height: 20px;\n"])));
var StyledMiddleDiv = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-left: 8px;\n  padding-right: 8px;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n"], ["\n  padding-left: 8px;\n  padding-right: 8px;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n"])));
var StyledPageTextDiv = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-bottom: 4px;\n  font-size: 12px;\n  font-weight: bold;\n  color: #868686;\n  letter-spacing: 0px;\n"], ["\n  padding-bottom: 4px;\n  font-size: 12px;\n  font-weight: bold;\n  color: #868686;\n  letter-spacing: 0px;\n"])));
var StyledPageNumbersDiv = styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 16px;\n  color: #464646;\n  font-weight: bold;\n"], ["\n  font-size: 16px;\n  color: #464646;\n  font-weight: bold;\n"])));
var StyledPageInput = styled('input')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: none;\n  outline: none;\n  text-align: center;\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  font-size: 16px;\n  color: #464646;\n  font-weight: bold;\n"], ["\n  border: none;\n  outline: none;\n  text-align: center;\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  font-size: 16px;\n  color: #464646;\n  font-weight: bold;\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var VisuallyHiddenDiv = styled('div')(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  color: transparent;\n  opacity: 0.01;\n"], ["\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  color: transparent;\n  opacity: 0.01;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

export { PagingWidget };
//# sourceMappingURL=PagingWidget.js.map
