import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Input } from "../../input";
import { useMemo, useRef } from "react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown/dropdown";
import { ArrowIcon } from "../../icon";
import { useLocalStorage } from "@orderly.network/hooks";
import { cn } from "../../utils";
import { Decimal, commify, todpIfNeed } from "@orderly.network/utils";
export var PnLMode;
(function(PnLMode) {
    PnLMode["PnL"] = "PnL";
    PnLMode["OFFSET"] = "Offset";
    PnLMode["PERCENTAGE"] = "Offset%";
})(PnLMode || (PnLMode = {}));
export const PnlInput = (props)=>{
    const { quote, type, quote_dp = 2 } = props;
    const [mode, setMode] = useLocalStorage("TP/SL_Mode", "Offset%");
    const percentageSuffix = useRef("");
    const key = useMemo(()=>{
        switch(mode){
            case "Offset":
                return `${type.toLowerCase()}_offset`;
            case "Offset%":
                return `${type.toLowerCase()}_offset_percentage`;
            default:
                return `${type.toLowerCase()}_pnl`;
        }
    }, [
        mode
    ]);
    const value = useMemo(()=>{
        const val = props.values[mode];
        // console.log("val", val);
        if (val === "") return val;
        if (mode === "PnL" || mode === "Offset") {
            return commify(val);
        }
        if (mode === "Offset%") {
            return `${new Decimal(val).mul(100).todp(2, 4).toString()}${percentageSuffix.current}`;
        // return (Number(val) * 100).toFixed(2);
        }
        return val;
    }, [
        props.values,
        mode
    ]);
    const pnlNumber = Number(props.values.PnL);
    return /*#__PURE__*/ _jsx(Input, {
        prefix: mode,
        placeholder: mode === "Offset%" ? "%" : quote,
        className: cn("orderly-text-right oorderly-text-3xs orderly-caret-white placeholder:orderly-text-3xs", pnlNumber > 0 ? "orderly-text-trade-profit" : pnlNumber === 0 ? "" : "orderly-text-trade-loss"),
        fixClassName: "desktop:orderly-text-3xs",
        containerClassName: "desktop:orderly-bg-base-700 orderly-bg-base-500",
        "data-testid": props.testId,
        name: props.type,
        id: props.type,
        autoComplete: "off",
        thousandSeparator: true,
        suffix: /*#__PURE__*/ _jsxs(DropdownMenu, {
            modal: false,
            children: [
                /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
                    asChild: true,
                    children: /*#__PURE__*/ _jsx("button", {
                        className: "orderly-px-2 orderly-h-full orderly-group active:orderly-outline-0",
                        "data-testid": `${props.type}_dropdown_btn`,
                        children: /*#__PURE__*/ _jsx(ArrowIcon, {
                            size: 12,
                            className: "group-data-[state=open]:orderly-rotate-180 orderly-transition orderly-text-base-contrast-54"
                        })
                    })
                }),
                /*#__PURE__*/ _jsxs(DropdownMenuContent, {
                    align: "end",
                    className: "orderly-w-[120px]",
                    onCloseAutoFocus: (event)=>{
                        event.preventDefault();
                    },
                    children: [
                        /*#__PURE__*/ _jsx(DropdownMenuItem, {
                            onSelect: ()=>setMode("PnL"),
                            "data-testid": `${"PnL"}_menu_item`,
                            children: "PnL"
                        }),
                        /*#__PURE__*/ _jsx(DropdownMenuItem, {
                            onSelect: ()=>setMode("Offset"),
                            "data-testid": `${"Offset"}_mneu_item`,
                            children: "Offset"
                        }),
                        /*#__PURE__*/ _jsx(DropdownMenuItem, {
                            onSelect: ()=>setMode("Offset%"),
                            "data-testid": `${"Offset%"}_menu_item`,
                            children: "Offset%"
                        })
                    ]
                })
            ]
        }),
        value: value,
        onValueChange: (value)=>{
            if (mode === "Offset%") {
                if (value !== "") {
                    percentageSuffix.current = value.endsWith(".") ? "." : "";
                    value = new Decimal(value).div(100).todp(4, 4).toNumber();
                }
            } else {
                value = todpIfNeed(value, quote_dp);
            }
            props.onChange(key, value);
        // setInnerValue(value);
        }
    });
};

//# sourceMappingURL=pnlInput.js.map