import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef, useState } from 'react';
import { LeftArrow } from '../../../icons/LeftArrow';
import { RightArrow } from '../../../icons/RightArrow';
export function ErrorPagination(param) {
    let { readyErrors, activeIdx, onActiveIndexChange } = param;
    const handlePrevious = useCallback(()=>activeIdx > 0 ? onActiveIndexChange(Math.max(0, activeIdx - 1)) : null, [
        activeIdx,
        onActiveIndexChange
    ]);
    const handleNext = useCallback(()=>activeIdx < readyErrors.length - 1 ? onActiveIndexChange(Math.max(0, Math.min(readyErrors.length - 1, activeIdx + 1))) : null, [
        activeIdx,
        readyErrors.length,
        onActiveIndexChange
    ]);
    const buttonLeft = useRef(null);
    const buttonRight = useRef(null);
    const buttonClose = useRef(null);
    const [nav, setNav] = useState(null);
    const onNav = useCallback((el)=>{
        setNav(el);
    }, []);
    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.
    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__*/ _jsx("div", {
        "data-nextjs-dialog-left-right": true,
        children: /*#__PURE__*/ _jsxs("nav", {
            ref: onNav,
            children: [
                /*#__PURE__*/ _jsx("button", {
                    ref: buttonLeft,
                    type: "button",
                    disabled: activeIdx === 0,
                    "aria-disabled": activeIdx === 0,
                    onClick: handlePrevious,
                    children: /*#__PURE__*/ _jsx(LeftArrow, {
                        title: "previous"
                    })
                }),
                /*#__PURE__*/ _jsx("button", {
                    ref: buttonRight,
                    type: "button",
                    disabled: activeIdx === readyErrors.length - 1,
                    "aria-disabled": activeIdx === readyErrors.length - 1,
                    onClick: handleNext,
                    children: /*#__PURE__*/ _jsx(RightArrow, {
                        title: "next"
                    })
                }),
                /*#__PURE__*/ _jsxs("small", {
                    children: [
                        /*#__PURE__*/ _jsx("span", {
                            children: activeIdx + 1
                        }),
                        " of",
                        ' ',
                        /*#__PURE__*/ _jsx("span", {
                            "data-nextjs-dialog-header-total-count": true,
                            children: readyErrors.length
                        }),
                        ' issue',
                        readyErrors.length < 2 ? '' : 's'
                    ]
                })
            ]
        })
    });
}

//# sourceMappingURL=ErrorPagination.js.map