import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import copyToClipboard from "copy-to-clipboard";
import cn from "classnames";
import React from "react";
import { currentTheme } from "../../theme";
import Icons from "../icons";
import Copy from "./copy";
import Download from "./download";
import Cross from "./cross";
import { Icon, Input, Content, Subscript, Title, InnerTitle, Warning, Wrapper, } from "./styled";
import { trimDp } from "../../utils/format";
export const validateFiniteNum = (s) => {
    if (s === "") {
        return null;
    }
    if (s.length > 1 && s[0] === "0" && s[1] !== ".") {
        return `Cannot parse number from string: ${s}`;
    }
    const value = Number(s);
    if (!isNaN(value) && isFinite(value)) {
        return null;
    }
    else {
        return `Cannot parse number from string: ${s}`;
    }
};
export const transformToAmount = (s) => {
    let result = s.replace(/,/g, ".").replace(/[^0-9\.]/g, "");
    const firstDotId = result.indexOf(".");
    if (firstDotId > -1) {
        result =
            result.slice(0, firstDotId) +
                "." +
                result.slice(firstDotId + 1).replace(/\./g, "");
    }
    if (result.length > 0 && result[0] === ".") {
        return "";
    }
    else if (result.length > 1 && result[0] === "0" && result[1] !== ".") {
        return result[0];
    }
    else {
        return result;
    }
};
const InputComponent = ({ computedValue, onChange, onError, onCopy, transform, validate, amount, copy, download, disabled, title, innerTitle, error, value, placeholder, type, inputmode, token, subscript, dpLimit, iconAddon, onClear, ...props }) => {
    const handleChange = React.useCallback((e) => {
        let val = "";
        if (e.clipboardData) {
            val = e.clipboardData.getData("text/plain");
        }
        else if (e.target) {
            val = e.target.value;
        }
        let error = null;
        let numericError = null;
        // let numericError = null;
        if (amount) {
            // val = transformToAmount(val);
            // slows down app significantly on many times user inputs value
            error = validateFiniteNum(val);
            numericError = error;
            if (typeof dpLimit === "number") {
                val = trimDp(val, dpLimit);
            }
        }
        val = transform ? transform(val) : val;
        error = validate ? validate(val) : null;
        if (onChange && !numericError) {
            onChange(val);
        }
        if (error && onError) {
            onError(error);
        }
        if (e.clipboardData) {
            e.preventDefault();
        }
    }, [onChange, onError, transform, validate, amount, dpLimit]);
    const [focused, setFocused] = React.useState(false);
    const onFocus = React.useCallback(() => setFocused(true), []);
    const onBlur = React.useCallback(() => setFocused(false), []);
    const theme = props.theme
        ? { ...currentTheme.input, ...props.theme }
        : currentTheme.input;
    if (props?.width) {
        theme.wrapperWidth = props?.width;
    }
    return (_jsxs(Wrapper, { theme: theme, disabled: disabled, className: cn("ui-input__wrapper", props.className, {
            "ui-input__wrapper__focused": focused,
        }), children: [title && (_jsx(Title, { theme: theme, className: "ui-input__title", children: title })), _jsxs(Content, { className: "ui-input__content", theme: theme, isError: !!error, isInnerTitle: !!innerTitle, children: [innerTitle && (_jsx(InnerTitle, { theme: theme, className: "ui-input__inner-title", children: innerTitle })), _jsx(Input, { onFocus: onFocus, onBlur: onBlur, disabled: disabled, className: cn("ui-input__input", {
                            "ui-input__input__focused": focused,
                            "ui-input__input__with-computed": !!computedValue,
                        }), theme: theme, value: value, placeholder: placeholder, onChange: handleChange, onPaste: handleChange, type: type, inputMode: inputmode }), !focused && computedValue && (_jsx("div", { className: "ui-input__computed", children: computedValue })), !!onClear ? (_jsx(Cross, { className: "ui-input__clear", onClick: () => onClear(value) })) : null, copy && (_jsx(Copy, { className: "ui-input__copy", onClick: () => {
                            copyToClipboard(value);
                            if (onCopy) {
                                onCopy();
                            }
                        } })), download && (_jsx(Download, { onClick: () => console.error("Input download not implemented"), className: "ui-input__download" })), token && (_jsxs(Icon, { theme: theme, className: "ui-input__icon", children: [_jsxs(Icons.Placeholder, { className: "ui-input__icon-placeholder", children: [token === "EOS" && _jsx(Icons.EOS, { width: "16px", height: "auto" }), token === "NUT" && _jsx(Icons.NUT, { width: "16px", height: "auto" }), token === "EOSDT" && _jsx(Icons.EOSDT, { width: "16px", height: "auto" }), (token === "pBTC" || token === "BTC") && (_jsx(Icons.PBTC, { width: "16px", height: "auto" }))] }), _jsx("span", { className: "ui-input__icon-label", children: token })] })), iconAddon] }), error && typeof error !== "boolean" ? (_jsx(Warning, { theme: theme, className: "ui-input__warning", children: error })) : (subscript && (_jsx(Subscript, { className: "ui-input__subscript", theme: theme, children: subscript })))] }));
};
export default InputComponent;
//# sourceMappingURL=index.js.map