"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Header", {
    enumerable: true,
    get: function() {
        return Header;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _orderContext = require("./orderContext");
const Header = (props)=>{
    const { mode, onModeChange } = (0, _react.useContext)(_orderContext.OrderBookContext);
    const currency = (0, _react.useMemo)(()=>{
        if (mode === "amount") {
            return props.quote;
        }
        return props.base;
    }, [
        mode,
        props.quote,
        props.base
    ]);
    const qtyLabel = (0, _react.useMemo)(()=>{
        return mode === "amount" ? "Value" : "Qty";
    }, [
        mode
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsxs)("div", {
                id: "orderly-order-book-header-price",
                className: "orderly-flex orderly-flex-col desktop:orderly-flex-row desktop:orderly-items-center",
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                        className: "desktop:orderly-text-2xs",
                        children: "Price"
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                        children: `(${props.quote})`
                    })
                ]
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-flex orderly-items-center orderly-cursor-pointer",
                onClick: ()=>onModeChange?.(mode === "amount" ? "quantity" : "amount"),
                children: /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)("span", {
                            className: "desktop:orderly-text-2xs",
                            children: qtyLabel
                        }),
                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                            children: `(${currency})`
                        })
                    ]
                })
            })
        ]
    });
};

//# sourceMappingURL=header.js.map