"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 _input = require("../../../input");
const _positionRowContext = require("./positionRowContext");
const _react = require("react");
const _popover = require("../../../popover");
const _slider = require("../../../slider");
const _symbolProvider = require("../../../provider/symbolProvider");
const _utils = require("@orderly.network/utils");
const _types = require("@orderly.network/types");
const QuantityInput = ()=>{
    const { position, quantity, side, updateQuantity } = (0, _positionRowContext.usePositionsRowContext)();
    const [open, setOpen] = (0, _react.useState)(false);
    const { base_tick } = (0, _symbolProvider.useSymbolContext)();
    const onChange = (e)=>{
        // console.log(e.target.value);
        updateQuantity(e.target.value);
    };
    const percentageClick = (value)=>{
        const d = new _utils.Decimal(position.position_qty);
        updateQuantity(d.mul(value).toString());
    };
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_popover.Popover, {
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_popover.PopoverTrigger, {
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_input.Input, {
                    value: quantity,
                    size: "small",
                    onChange: onChange,
                    className: "orderly-font-semibold"
                })
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_popover.PopoverContent, {
                align: "start",
                side: "bottom",
                onOpenAutoFocus: (e)=>e.preventDefault(),
                className: "orderly-w-[278px]",
                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                    className: "orderly-flex",
                    children: [
                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                            className: "orderly-w-[40px] orderly-text-3xs orderly-pt-[3px]",
                            children: `${Math.min(100, Math.ceil(Number(quantity ?? 0) / Math.abs(position.position_qty) * 100))}
            %`
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                            className: "orderly-flex-1 orderly-min-w-0",
                            children: [
                                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                    className: "orderly-h-[26px]",
                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_slider.Slider, {
                                        id: "orderly-positions-quantity-full-slider",
                                        color: side === _types.OrderSide.BUY ? "buy" : "sell",
                                        step: base_tick,
                                        min: 0,
                                        max: Math.abs(position.position_qty),
                                        markCount: 4,
                                        value: [
                                            Number(quantity ?? 0)
                                        ],
                                        onValueChange: (value)=>{
                                            if (typeof value[0] !== "undefined") {
                                                updateQuantity(value[0].toString());
                                            }
                                        }
                                    })
                                }),
                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                    className: "orderly-flex orderly-justify-between orderly-text-3xs",
                                    children: [
                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(PercentageButton, {
                                            value: 0,
                                            label: "0%",
                                            onClick: percentageClick
                                        }),
                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(PercentageButton, {
                                            value: 0.25,
                                            label: "25%",
                                            onClick: percentageClick
                                        }),
                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(PercentageButton, {
                                            value: 0.5,
                                            label: "50%",
                                            onClick: percentageClick
                                        }),
                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(PercentageButton, {
                                            value: 0.75,
                                            label: "75%",
                                            onClick: percentageClick
                                        }),
                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(PercentageButton, {
                                            value: 1,
                                            label: "Max",
                                            onClick: percentageClick
                                        })
                                    ]
                                })
                            ]
                        })
                    ]
                })
            })
        ]
    });
};
const PercentageButton = (props)=>{
    return /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
        className: "orderly-border orderly-border-base-contrast-54 orderly-rounded orderly-px-1 orderly-text-base-contrast-80 hover:orderly-bg-base-contrast/10",
        onClick: ()=>{
            props.onClick(props.value);
        },
        children: props.label
    });
};

//# sourceMappingURL=quantityInput.js.map