'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import { FieldLabel } from '../../fields/FieldLabel/index.js';
import { ChevronIcon } from '../../icons/Chevron/index.js';
import { useListQuery } from '../../providers/ListQuery/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import './index.scss';
const baseClass = 'sort-column';
export const SortColumn = (props)=>{
    const { name, appearance, disable = false, Label, label } = props;
    const { handleSortChange, query } = useListQuery();
    const { t } = useTranslation();
    const { sort } = query;
    const desc = `-${name}`;
    const asc = name;
    const ascClasses = [
        `${baseClass}__asc`
    ];
    if (sort === asc) {
        ascClasses.push(`${baseClass}--active`);
    }
    const descClasses = [
        `${baseClass}__desc`
    ];
    if (sort === desc) {
        descClasses.push(`${baseClass}--active`);
    }
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            baseClass,
            appearance && `${baseClass}--appearance-${appearance}`
        ].filter(Boolean).join(' '),
        children: [
            /*#__PURE__*/ _jsxDEV("span", {
                className: `${baseClass}__label`,
                children: Label ?? /*#__PURE__*/ _jsxDEV(FieldLabel, {
                    hideLocale: true,
                    label: label,
                    unstyled: true
                }, void 0, false, {
                    fileName: "src/elements/SortColumn/index.tsx",
                    lineNumber: 49,
                    columnNumber: 19
                }, this)
            }, void 0, false, {
                fileName: "src/elements/SortColumn/index.tsx",
                lineNumber: 48,
                columnNumber: 7
            }, this),
            !disable && /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__buttons`,
                children: [
                    /*#__PURE__*/ _jsxDEV("button", {
                        "aria-label": t('general:sortByLabelDirection', {
                            direction: t('general:ascending'),
                            label
                        }),
                        className: [
                            ...ascClasses,
                            `${baseClass}__button`
                        ].filter(Boolean).join(' '),
                        onClick: ()=>void handleSortChange(asc),
                        type: "button",
                        children: /*#__PURE__*/ _jsxDEV(ChevronIcon, {
                            direction: "up"
                        }, void 0, false, {
                            fileName: "src/elements/SortColumn/index.tsx",
                            lineNumber: 62,
                            columnNumber: 13
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/SortColumn/index.tsx",
                        lineNumber: 53,
                        columnNumber: 11
                    }, this),
                    /*#__PURE__*/ _jsxDEV("button", {
                        "aria-label": t('general:sortByLabelDirection', {
                            direction: t('general:descending'),
                            label
                        }),
                        className: [
                            ...descClasses,
                            `${baseClass}__button`
                        ].filter(Boolean).join(' '),
                        onClick: ()=>void handleSortChange(desc),
                        type: "button",
                        children: /*#__PURE__*/ _jsxDEV(ChevronIcon, {}, void 0, false, {
                            fileName: "src/elements/SortColumn/index.tsx",
                            lineNumber: 73,
                            columnNumber: 13
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/SortColumn/index.tsx",
                        lineNumber: 64,
                        columnNumber: 11
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/SortColumn/index.tsx",
                lineNumber: 52,
                columnNumber: 9
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/SortColumn/index.tsx",
        lineNumber: 43,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map