import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useMemo } from "react";
import { OrderBookContext } from "./orderContext";
export const Header = (props)=>{
    const { mode, onModeChange } = useContext(OrderBookContext);
    const currency = useMemo(()=>{
        if (mode === "amount") {
            return props.quote;
        }
        return props.base;
    }, [
        mode,
        props.quote,
        props.base
    ]);
    const qtyLabel = useMemo(()=>{
        return mode === "amount" ? "Value" : "Qty";
    }, [
        mode
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-flex orderly-flex-1 orderly-flex-row orderly-justify-between orderly-text-base-contrast-36 orderly-text-4xs desktop:orderly-text-3xs orderly-pb-2 desktop:orderly-pt-2",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                id: "orderly-order-book-header-price",
                className: "orderly-flex orderly-flex-col desktop:orderly-flex-row desktop:orderly-items-center",
                children: [
                    /*#__PURE__*/ _jsx("span", {
                        className: "desktop:orderly-text-2xs",
                        children: "Price"
                    }),
                    /*#__PURE__*/ _jsx("span", {
                        children: `(${props.quote})`
                    })
                ]
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-flex orderly-items-center orderly-cursor-pointer",
                onClick: ()=>onModeChange?.(mode === "amount" ? "quantity" : "amount"),
                children: /*#__PURE__*/ _jsxs("div", {
                    id: "orderly-order-book-header-qty",
                    className: "orderly-flex orderly-flex-col desktop:orderly-flex-row desktop:orderly-items-center orderly-text-base-contrast-36 orderly-text-4xs orderly-items-end orderly-mr-1",
                    children: [
                        /*#__PURE__*/ _jsx("span", {
                            className: "desktop:orderly-text-2xs",
                            children: qtyLabel
                        }),
                        /*#__PURE__*/ _jsx("span", {
                            children: `(${currency})`
                        })
                    ]
                })
            })
        ]
    });
};

//# sourceMappingURL=header.js.map