"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "SortGroup", {
    enumerable: true,
    get: function() {
        return SortGroup;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _sortItem = require("../sections/sortItem");
const _useSort = require("../useSort");
const _utils = require("../../../utils");
const _icon = require("../../../icon");
const _tooltip = require("../../../tooltip");
const SortGroup = (props)=>{
    //   const onClick = (value: SortKey) => {
    //     console.log(value);
    //   };
    const [open, setOpen] = (0, _react.useState)(false);
    const { sortKey, onSort, direction, value: currentValue } = (0, _useSort.useSort)(props.value, props.readLastSortCondition);
    (0, _react.useEffect)(()=>{
        props.onChange?.({
            key: sortKey,
            direction
        });
    }, [
        sortKey,
        direction
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: (0, _utils.cn)("orderly-grid orderly-grid-cols-5 orderly-text-3xs orderly-text-base-contrast-54 orderly-py-3 orderly-px-5 orderly-mt-2", props.hasSuffix && "orderly-grid-cols-6"),
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-col-span-2",
                children: "Instrument"
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-col-span-1 orderly-flex orderly-justify-end",
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_sortItem.SortItem, {
                    label: "Last",
                    value: "price",
                    onClick: onSort,
                    currentValue: currentValue
                })
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-col-span-1 orderly-flex orderly-justify-end",
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_sortItem.SortItem, {
                    label: "24h%",
                    value: "change",
                    onClick: onSort,
                    currentValue: currentValue
                })
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                className: "orderly-col-span-1 orderly-flex orderly-pl-2",
                children: [
                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                        className: "orderly-flex-1"
                    }),
                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_tooltip.Tooltip, {
                        content: "24 hour total trading volume on the Orderly Network.",
                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                            className: "orderly-flex orderly-justify-end orderly-items-center",
                            children: [
                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.OrderlyIcon, {
                                    size: 14,
                                    className: "orderly-mr-[6px]"
                                }),
                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_sortItem.SortItem, {
                                    label: "Volume",
                                    value: "vol",
                                    onClick: onSort,
                                    currentValue: currentValue
                                })
                            ]
                        })
                    })
                ]
            })
        ]
    });
};

//# sourceMappingURL=sortGroup.js.map