import React, { useState } from "react";
import { defaultValues } from "../../utils";
import { QuickJumpToPageRoot, QuickJumpToPageTypography, QuickJumpToPageInput } from "./PaginationQuickJumpToPage.styles";
export const PaginationQuickJumpToPage = ({ placeholderQuickJump = defaultValues.placeholderQuickJump, textQuickJump = defaultValues.textQuickJump, onChangeValue, onFocusQuickJump, onBlurQuickJump, ...rest })=>{
    const [pageValue, setPageValue] = useState('');
    const handleChangeInput = (event)=>{
        const result = event.currentTarget.value.replace(/\D/g, '');
        if (result === '') {
            return setPageValue('');
        }
        setPageValue(Number(result));
    };
    const handleKeyPress = (event)=>{
        if (event.key === 'Enter') {
            if (onChangeValue) {
                onChangeValue(Number(pageValue));
            }
            setPageValue('');
        }
    };
    return /*#__PURE__*/ React.createElement(QuickJumpToPageRoot, rest, /*#__PURE__*/ React.createElement(QuickJumpToPageTypography, null, textQuickJump), /*#__PURE__*/ React.createElement(QuickJumpToPageInput, {
        value: pageValue,
        placeholder: placeholderQuickJump,
        onKeyUp: handleKeyPress,
        onChange: handleChangeInput,
        onFocus: onFocusQuickJump,
        onBlur: onBlurQuickJump
    }));
};
