import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { OrderlyIcon } from "../../../icon";
import { useSort } from "../useSort";
import { SortItem } from "./sortItem";
import { useEffect } from "react";
export const SortGroup = (props)=>{
    const { sortKey, onSort, direction, value: currentValue } = useSort(props.value, props.readLastSortCondition);
    useEffect(()=>{
        props.onChange?.({
            key: sortKey,
            direction
        });
    }, [
        sortKey,
        direction
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-flex orderly-justify-between orderly-text-4xs orderly-pt-5 orderly-pb-3 orderly-text-base-contrast-36",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-items-center orderly-gap-1",
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        children: "Instrument"
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        children: "/"
                    }),
                    /*#__PURE__*/ _jsx(OrderlyIcon, {
                        size: 14,
                        className: "orderly-mx-[2px]"
                    }),
                    /*#__PURE__*/ _jsx(SortItem, {
                        label: "Vol.",
                        value: "vol",
                        onClick: onSort,
                        currentValue: currentValue
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-items-center orderly-gap-1",
                children: [
                    /*#__PURE__*/ _jsx(SortItem, {
                        label: "Price",
                        value: "price",
                        onClick: onSort,
                        currentValue: currentValue
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        children: "/"
                    }),
                    /*#__PURE__*/ _jsx(SortItem, {
                        label: "Change%",
                        value: "change",
                        onClick: onSort,
                        currentValue: currentValue
                    })
                ]
            })
        ]
    });
};

//# sourceMappingURL=sortGroup.js.map