"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "ErrorPagination", {
    enumerable: true,
    get: function() {
        return ErrorPagination;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _LeftArrow = require("../../../icons/LeftArrow");
const _RightArrow = require("../../../icons/RightArrow");
function ErrorPagination(param) {
    let { readyErrors, activeIdx, onActiveIndexChange } = param;
    const handlePrevious = (0, _react.useCallback)(()=>activeIdx > 0 ? onActiveIndexChange(Math.max(0, activeIdx - 1)) : null, [
        activeIdx,
        onActiveIndexChange
    ]);
    const handleNext = (0, _react.useCallback)(()=>activeIdx < readyErrors.length - 1 ? onActiveIndexChange(Math.max(0, Math.min(readyErrors.length - 1, activeIdx + 1))) : null, [
        activeIdx,
        readyErrors.length,
        onActiveIndexChange
    ]);
    const buttonLeft = (0, _react.useRef)(null);
    const buttonRight = (0, _react.useRef)(null);
    const buttonClose = (0, _react.useRef)(null);
    const [nav, setNav] = (0, _react.useState)(null);
    const onNav = (0, _react.useCallback)((el)=>{
        setNav(el);
    }, []);
    (0, _react.useEffect)(()=>{
        if (nav == null) {
            return;
        }
        const root = nav.getRootNode();
        const d = self.document;
        function handler(e) {
            if (e.key === 'ArrowLeft') {
                e.preventDefault();
                e.stopPropagation();
                if (buttonLeft.current) {
                    buttonLeft.current.focus();
                }
                handlePrevious && handlePrevious();
            } else if (e.key === 'ArrowRight') {
                e.preventDefault();
                e.stopPropagation();
                if (buttonRight.current) {
                    buttonRight.current.focus();
                }
                handleNext && handleNext();
            } else if (e.key === 'Escape') {
                e.preventDefault();
                e.stopPropagation();
                if (root instanceof ShadowRoot) {
                    const a = root.activeElement;
                    if (a && a !== buttonClose.current && a instanceof HTMLElement) {
                        a.blur();
                        return;
                    }
                }
                close == null ? void 0 : close();
            }
        }
        root.addEventListener('keydown', handler);
        if (root !== d) {
            d.addEventListener('keydown', handler);
        }
        return function() {
            root.removeEventListener('keydown', handler);
            if (root !== d) {
                d.removeEventListener('keydown', handler);
            }
        };
    }, [
        nav,
        handleNext,
        handlePrevious
    ]);
    // Unlock focus for browsers like Firefox, that break all user focus if the
    // currently focused item becomes disabled.
    (0, _react.useEffect)(()=>{
        if (nav == null) {
            return;
        }
        const root = nav.getRootNode();
        // Always true, but we do this for TypeScript:
        if (root instanceof ShadowRoot) {
            const a = root.activeElement;
            if (activeIdx === 0) {
                if (buttonLeft.current && a === buttonLeft.current) {
                    buttonLeft.current.blur();
                }
            } else if (activeIdx === readyErrors.length - 1) {
                if (buttonRight.current && a === buttonRight.current) {
                    buttonRight.current.blur();
                }
            }
        }
    }, [
        nav,
        activeIdx,
        readyErrors.length
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
        "data-nextjs-dialog-left-right": true,
        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("nav", {
            ref: onNav,
            children: [
                /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                    ref: buttonLeft,
                    type: "button",
                    disabled: activeIdx === 0,
                    "aria-disabled": activeIdx === 0,
                    onClick: handlePrevious,
                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_LeftArrow.LeftArrow, {
                        title: "previous"
                    })
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                    ref: buttonRight,
                    type: "button",
                    disabled: activeIdx === readyErrors.length - 1,
                    "aria-disabled": activeIdx === readyErrors.length - 1,
                    onClick: handleNext,
                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RightArrow.RightArrow, {
                        title: "next"
                    })
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsxs)("small", {
                    children: [
                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                            children: activeIdx + 1
                        }),
                        " of",
                        ' ',
                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                            "data-nextjs-dialog-header-total-count": true,
                            children: readyErrors.length
                        }),
                        ' issue',
                        readyErrors.length < 2 ? '' : 's'
                    ]
                })
            ]
        })
    });
}

if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
  Object.defineProperty(exports.default, '__esModule', { value: true });
  Object.assign(exports.default, exports);
  module.exports = exports.default;
}

//# sourceMappingURL=ErrorPagination.js.map