'use strict';

var React = require('react');
var index = require('./index-a31ed3e1.js');
require('./translationsContext-78113889.js');
var togetherComponentGlobalContext = require('./utils-302bc65c.js');
var treePopoverMenu = require('./treePopoverMenu-89dcd8ba.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%233E3F58' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m8 14 4 4 4-4M16 10l-4-4-4 4'/%3e%3c/svg%3e";
var MBSortBy = img$1;

var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath fill='%238C8C8C' d='M4.5 7h7a.46.46 0 0 0 .351-.165.56.56 0 0 0 .149-.39q0-.226-.149-.391l-3.5-3.89a.458.458 0 0 0-.703 0l-3.5 3.89a.56.56 0 0 0-.148.39q0 .226.148.391Q4.298 7 4.5 7M11.5 9h-7a.46.46 0 0 0-.352.165.56.56 0 0 0-.148.39q0 .226.148.391l3.5 3.889a.46.46 0 0 0 .703 0l3.5-3.889a.56.56 0 0 0 .149-.39q0-.226-.149-.391A.46.46 0 0 0 11.5 9'/%3e%3c/svg%3e";
var IconSortArrow = img;

var LabelSortingValue;
(function (LabelSortingValue) {
    LabelSortingValue["latest"] = "latest";
    LabelSortingValue["oldest"] = "oldest";
    LabelSortingValue["popular"] = "popular";
})(LabelSortingValue || (LabelSortingValue = {}));
const LabelSorting = ({ onChange, className, style, leftLabel, rightLabel, color, value, choices, }) => {
    const { data: { env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
    return (React__default["default"].createElement(treePopoverMenu.LabelSortPin, { label: leftLabel, rightLabel: React__default["default"].createElement(treePopoverMenu.TreePopoverMenu, { position: "bottom", align: "end", data: {
                isShowheader: false,
                type: 'list',
                list: choices.map((c) => ({
                    label: c.label,
                    onClick: () => onChange && onChange(String(c.value)),
                    selected: c.value === value,
                    className: 'bold-item',
                })),
            }, toggleButtonContent: React__default["default"].createElement("div", { style: {
                    display: 'flex',
                } },
                React__default["default"].createElement(index.Text, { style: {
                        display: 'flex',
                        alignItems: 'center',
                        fontWeight: 'normal',
                        marginRight: 12,
                    }, size: "p4" }, rightLabel),
                React__default["default"].createElement("img", { src: isMarryBaby ? MBSortBy : IconSortArrow, style: {
                        width: 16,
                        height: 16,
                        alignSelf: 'center',
                    }, loading: "lazy" })) }), color: 'gray' , className: className, style: style }));
};

exports.LabelSorting = LabelSorting;
