"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const SpinnerBars_1 = require("nice-ui/lib/2-inline-block/SpinnerBars");
const NotchedOutline_1 = require("nice-ui/lib/2-inline-block/NotchedOutline");
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const styles_1 = require("nice-ui/lib/styles");
const context_1 = require("nice-ui/lib/styles/context");
const outlineClass = (0, nano_theme_1.rule)({
    pd: '0px !important',
});
const inpClass = (0, nano_theme_1.rule)({
    ...styles_1.fonts.get('ui', 'bold', 1),
    fz: '15px',
    lh: '1.4em',
    d: 'block',
    w: '100%',
    bxz: 'border-box',
    bd: 0,
    mr: 0,
    out: 0,
    pd: '8px 10px',
    bdrad: '4px',
    bg: 'transparent',
    '&:disabled': {
        bg: 'transparent',
    },
    '&::placeholder': {
        opacity: 0.7,
    },
});
const { useState, useCallback, useRef, useEffect } = React;
const Input = (props) => {
    const { disabled, value, placeholder, onPaste, onEsc, onKeyDown, onChange, label, size, readOnly, type = 'text', waiting, right, } = props;
    const [focus, setFocus] = useState(false);
    const ref = useRef(null);
    const styles = (0, context_1.useStyles)();
    useEffect(() => {
        if (!ref.current)
            return;
        if (!props.focus)
            return;
        if (props.focus)
            ref.current.focus();
        if (props.select)
            ref.current.select();
    }, [ref.current]);
    const onFocus = useCallback(() => {
        setFocus(true);
        props.onFocus?.();
    }, [props.onFocus]);
    const onBlur = useCallback(() => {
        setFocus(false);
        props.onBlur?.();
    }, [props.onBlur]);
    let rightElement = null;
    if (right) {
        rightElement = right;
    }
    else if (waiting) {
        rightElement = React.createElement(SpinnerBars_1.SpinnerBars, null);
    }
    const style = {};
    if (size) {
        const factor = size < 0 ? 1 : 2;
        style.fontSize = `${16 + size * factor}px`;
        style.paddingTop = `${8 + size * factor}px`;
        style.paddingBottom = `${8 + size * factor}px`;
        if (size < 0) {
            style.fontWeight = styles_1.fonts.get('ui', 'mid', 1).fw;
        }
    }
    const inputAttr = {
        ref: (input) => {
            ref.current = input;
            props.inp?.(input);
        },
        className: inpClass,
        style,
        disabled,
        value,
        placeholder,
        type,
        readOnly,
        onFocus,
        onBlur,
        onKeyDown: (e) => {
            if (onEsc && e.key === 'Escape')
                onEsc(e);
            onKeyDown?.(e);
        },
        onPaste,
        onChange,
    };
    return (React.createElement(NotchedOutline_1.NotchedOutline, { className: outlineClass, label: label, active: focus, disabled: disabled || readOnly, style: { background: focus ? styles.col.map('bg') : 'transparent' } },
        React.createElement(Split_1.Split, { style: { alignItems: 'center' } },
            React.createElement("input", { ...inputAttr }),
            rightElement)));
};
exports.Input = Input;
//# sourceMappingURL=Input.js.map