import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Input } from "../input";
import { InputMask } from "../input/inputMask";
import { NetworkImage } from "../icon/networkImage";
import { useMemo } from "react";
import { Divider } from "../divider";
import { Decimal, commify } from "@orderly.network/utils";
import { Spinner } from "../spinner";
export const TokenQtyInput = (props)=>{
    const { onChange, onValueChange, onTokenChange, token, loading, needCalc = false, ...rest } = props;
    const amount = useMemo(()=>{
        if (!props.amount) return "";
        const num = Number(props.amount);
        if (isNaN(num)) return "";
        if (num <= 0) return "";
        if (needCalc) {
            return commify(new Decimal(props.amount).sub(props.fee).toFixed(2));
        }
        return commify(new Decimal(props.amount).toFixed(2));
    // return commify(props.amount);
    }, [
        props.amount,
        props.fee,
        needCalc
    ]);
    return /*#__PURE__*/ _jsx(Input, {
        ...rest,
        // onChange={_onChange}
        placeholder: "Quantity",
        readOnly: true,
        value: amount,
        prefix: loading ? /*#__PURE__*/ _jsx(Spinner, {
            size: "small",
            className: "orderly-mx-2"
        }) : undefined,
        containerClassName: "orderly-bg-base-500 orderly-rounded-borderRadius",
        className: "orderly-token-quantity-input orderly-text-sm orderly-text-base-contrast-54 desktop:orderly-text-base",
        suffix: /*#__PURE__*/ _jsxs(InputMask, {
            className: "orderly-flex-row orderly-items-center orderly-gap-2",
            children: [
                /*#__PURE__*/ _jsx(Divider, {
                    vertical: true
                }),
                /*#__PURE__*/ _jsx(NetworkImage, {
                    name: token.symbol,
                    type: "token",
                    size: "small"
                }),
                /*#__PURE__*/ _jsx("span", {
                    className: "orderly-text-base-contrast-80 orderly-text-3xs  desktop:orderly-text-xs",
                    children: token.symbol
                })
            ]
        })
    });
};

//# sourceMappingURL=tokenQtyInput.js.map