import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useMemo } from "react";
import { CellBar } from "./cellBar";
import { OrderBookContext } from "../../block/orderbook/orderContext";
import { Decimal, getPrecisionByNumber } from "@orderly.network/utils";
import { Numeral } from "../../text/numeral";
import { SymbolContext } from "../../provider";
import { cn } from "../../utils";
import { OrderBookCellType } from "./types";
export const OrderBookCell = (props)=>{
    const width = props.accumulated / props.count * 100;
    const { cellHeight, onItemClick, depth, showTotal } = useContext(OrderBookContext);
    const { base_dp, quote_dp } = useContext(SymbolContext);
    let qty = Number.isNaN(props.quantity) ? "-" : props.mode === "amount" ? new Decimal(props.quantity).mul(props.price).toString() : props.quantity;
    if (showTotal) {
        qty = props.quantity;
    }
    const dp = useMemo(()=>{
        return getPrecisionByNumber(depth || `${quote_dp}`);
    }, [
        depth,
        quote_dp
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: cn("orderly-order-book-list-item orderly-overflow-hidden orderly-relative orderly-cursor-pointer orderly-tabular-nums", showTotal && "orderly-flex-1"),
        style: {
            height: `${cellHeight}px`
        },
        onClick: (e)=>{
            if (Number.isNaN(props.price) || Number.isNaN(props.quantity)) return;
            onItemClick?.([
                props.price,
                props.quantity
            ]);
        },
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-flex-row orderly-justify-between orderly-items-center orderly-z-10 orderly-relative orderly-px-1 orderly-text-4xs desktop:orderly-text-2xs orderly-h-full",
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        className: props.type === OrderBookCellType.ASK ? "orderly-text-trade-loss" : "orderly-text-trade-profit",
                        children: /*#__PURE__*/ _jsx(Numeral, {
                            precision: dp,
                            children: props.price
                        })
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "orderly-text-base-contrast-80",
                        children: /*#__PURE__*/ _jsx(Numeral, {
                            precision: props.mode === "amount" ? 2 : base_dp,
                            children: qty
                        })
                    })
                ]
            }),
            Number.isNaN(width) || showTotal ? null : /*#__PURE__*/ _jsx(CellBar, {
                width: width,
                className: props.type === OrderBookCellType.ASK ? "orderly-bg-trade-loss/20" : "orderly-bg-trade-profit/20"
            })
        ]
    });
};

//# sourceMappingURL=cell.js.map