"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "QuantityInput", {
    enumerable: true,
    get: function() {
        return QuantityInput;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _divider = require("../../divider");
const _button = /*#__PURE__*/ _interop_require_default(require("../../button"));
const _css = require("../../utils/css");
const _utils = require("@orderly.network/utils");
const _spinner = require("../../spinner");
const _num = require("../../utils/num");
const _tokenPicker = require("../pickers/tokenPicker");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
const QuantityInput = (props)=>{
    const { disabled, precision = 2 } = props;
    const inputRef = (0, _react.useRef)(null);
    const amount = (0, _react.useMemo)(()=>{
        return new _utils.Decimal(props.quantity || 0).mul(props.markPrice)// .todp(props.decimals)
        .todp(Math.abs(2 - 5)).toString();
    }, [
        props.quantity,
        props.markPrice
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                id: "orderly-quantity-input-view",
                className: (0, _css.cn)("orderly-bg-base-500 dark:orderly-bg-base-100 orderly-rounded orderly-pl-1 orderly-pr-2 orderly-py-2 focus-within:orderly-bg-bg-base-500 focus-within:orderly-outline focus-within:orderly-outline-1 orderly-outline-primary", props.className, {
                    "orderly-outline orderly-outline-1 orderly-outline-danger-light": props.status === "error",
                    "orderly-outline orderly-outline-1 orderly-outline-warning": props.status === "warning"
                }),
                onClick: ()=>inputRef.current?.focus(),
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        className: "orderly-flex",
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex-1 orderly-flex orderly-justify-between",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
                                        type: "text",
                                        inputMode: "decimal",
                                        ref: inputRef,
                                        disabled: disabled,
                                        value: props.quantity,
                                        // onChange={onChange}
                                        onChange: (event)=>{
                                            //
                                            props?.onValueChange?.({
                                                value: event.target.value,
                                                token: props.token?.symbol ?? ""
                                            });
                                        },
                                        className: "orderly-quantity-input orderly-bg-transparent orderly-h-full orderly-flex-1 orderly-px-2 focus-visible:orderly-outline-none orderly-font-semibold orderly-text-sm orderly-text-base-contrast placeholder:orderly-text-base-contrast-36 desktop:orderly-text-base",
                                        placeholder: "Quantity"
                                    }),
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.default, {
                                        variant: "text",
                                        size: "small",
                                        className: "orderly-quantity-input-max orderly-font-semibold orderly-text-link orderly-px-2 orderly-min-w-[40px] orderly-text-3xs desktop:orderly-text-xs",
                                        disabled: !props.maxAmount,
                                        onClick: (event)=>{
                                            props?.onValueChange?.({
                                                value: (0, _num.parseNumber)(props.maxAmount ?? 0, {
                                                    precision
                                                }),
                                                token: props.token?.symbol ?? ""
                                            });
                                            event.preventDefault();
                                            event.stopPropagation();
                                        },
                                        children: "MAX"
                                    })
                                ]
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_divider.Divider, {
                                vertical: true
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_tokenPicker.TokenSelect, {
                                tokens: props.tokens,
                                token: props.token,
                                fetchBalance: props.fetchBalance,
                                onTokenChange: props.onTokenChange,
                                disabled: disabled,
                                onClosed: ()=>inputRef.current?.focus()
                            })
                        ]
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                        className: "orderly-flex orderly-items-center orderly-text-4xs orderly-justify-between orderly-px-2 orderly-py-1 orderly-text-base-contrast-36 desktop:orderly-text-3xs orderly-tabular-nums",
                        children: [
                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                children: `$${amount}`
                            }),
                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                className: "orderly-flex orderly-items-center orderly-space-x-2",
                                children: [
                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                        children: `Available: ${(0, _num.parseNumber)(props.maxAmount ?? 0, {
                                            precision,
                                            rule: "price"
                                        }) ?? "-"} ${props.token?.symbol ?? ""}`
                                    }),
                                    props.balanceRevalidating && /*#__PURE__*/ (0, _jsxruntime.jsx)(_spinner.Spinner, {
                                        size: "small"
                                    })
                                ]
                            })
                        ]
                    })
                ]
            }),
            props.hintMessage && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: (0, _css.cn)("orderly-mt-2 orderly-text-4xs orderly-relative before:orderly-block orderly-pl-3 before:orderly-w-[4px] before:orderly-rounded-[4px] before:orderly-h-[4px] before:orderly-absolute before:orderly-left-0 before:orderly-top-1/2 before:orderly--translate-y-1/2", {
                    "orderly-text-danger-light": props.status === "error",
                    "orderly-before:bg-danger-light": props.status === "error",
                    "orderly-text-warning": props.status === "warning"
                }),
                children: props.hintMessage
            })
        ]
    });
};

//# sourceMappingURL=quantityInput.js.map