import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo, useRef } from "react";
import { Divider } from "../../divider";
import Button from "../../button";
import { cn } from "../../utils/css";
import { Decimal } from "@orderly.network/utils";
import { Spinner } from "../../spinner";
import { parseNumber } from "../../utils/num";
import { TokenSelect } from "../pickers/tokenPicker";
export const QuantityInput = (props)=>{
    const { disabled } = props;
    const inputRef = useRef(null);
    const amount = useMemo(()=>{
        return new Decimal(props.quantity || 0).mul(props.markPrice)// .todp(props.decimals)
        .todp(Math.abs(2 - 5)).toString();
    }, [
        props.quantity,
        props.markPrice
    ]);
    return /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            /*#__PURE__*/ _jsxs("div", {
                id: "orderly-quantity-input-view",
                className: 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__*/ _jsxs("div", {
                        className: "orderly-flex",
                        children: [
                            /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex-1 orderly-flex orderly-justify-between",
                                children: [
                                    /*#__PURE__*/ _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__*/ _jsx(Button, {
                                        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: parseNumber(props.maxAmount ?? 0, {
                                                    precision: 2
                                                }),
                                                token: props.token?.symbol ?? ""
                                            });
                                            event.preventDefault();
                                            event.stopPropagation();
                                        },
                                        children: "MAX"
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsx(Divider, {
                                vertical: true
                            }),
                            /*#__PURE__*/ _jsx(TokenSelect, {
                                tokens: props.tokens,
                                token: props.token,
                                fetchBalance: props.fetchBalance,
                                onTokenChange: props.onTokenChange,
                                disabled: disabled,
                                onClosed: ()=>inputRef.current?.focus()
                            })
                        ]
                    }),
                    /*#__PURE__*/ _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__*/ _jsx("span", {
                                children: `$${amount}`
                            }),
                            /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-items-center orderly-space-x-2",
                                children: [
                                    /*#__PURE__*/ _jsx("span", {
                                        children: `Available: ${parseNumber(props.maxAmount ?? 0, {
                                            precision: 2,
                                            rule: "price"
                                        }) ?? "-"} ${props.token?.symbol ?? ""}`
                                    }),
                                    props.balanceRevalidating && /*#__PURE__*/ _jsx(Spinner, {
                                        size: "small"
                                    })
                                ]
                            })
                        ]
                    })
                ]
            }),
            props.hintMessage && /*#__PURE__*/ _jsx("div", {
                className: 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