'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import { SortDownIcon } from '../../icons/Sort/index.js';
import { useListQuery } from '../../providers/ListQuery/index.js';
import './index.scss';
import { useTranslation } from '../../providers/Translation/index.js';
const baseClass = 'sort-header';
function useSort() {
    const { handleSortChange, orderableFieldName, query } = useListQuery();
    const querySort = Array.isArray(query.sort) ? query.sort[0] : query.sort;
    const isActive = querySort === orderableFieldName;
    const handleSortPress = ()=>{
        // If it's already sorted by the "_order" field, do nothing
        if (isActive) {
            return;
        }
        // If NOT sorted by the "_order" field, sort by that field.
        void handleSortChange(orderableFieldName);
    };
    return {
        handleSortPress,
        isActive
    };
}
export const SortHeader = (props)=>{
    const { appearance } = props;
    const { handleSortPress, isActive } = useSort();
    const { t } = useTranslation();
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            baseClass,
            appearance && `${baseClass}--appearance-${appearance}`
        ].filter(Boolean).join(' '),
        children: /*#__PURE__*/ _jsxDEV("div", {
            className: `${baseClass}__buttons`,
            children: /*#__PURE__*/ _jsxDEV("button", {
                "aria-label": t('general:sortByLabelDirection', {
                    direction: t('general:ascending'),
                    label: 'Order'
                }),
                className: `${baseClass}__button ${isActive ? `${baseClass}--active` : ''}`,
                onClick: handleSortPress,
                type: "button",
                children: /*#__PURE__*/ _jsxDEV(SortDownIcon, {}, void 0, false, {
                    fileName: "src/elements/SortHeader/index.tsx",
                    lineNumber: 55,
                    columnNumber: 11
                }, this)
            }, void 0, false, {
                fileName: "src/elements/SortHeader/index.tsx",
                lineNumber: 46,
                columnNumber: 9
            }, this)
        }, void 0, false, {
            fileName: "src/elements/SortHeader/index.tsx",
            lineNumber: 45,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/SortHeader/index.tsx",
        lineNumber: 40,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map