import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
import React from 'react';
import { ChevronIcon } from '../../../icons/Chevron/index.js';
import { SortDownIcon, SortUpIcon } from '../../../icons/Sort/index.js';
import { useFolder } from '../../../providers/Folders/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import { Pill } from '../../Pill/index.js';
import { Popup, PopupList } from '../../Popup/index.js';
import './index.scss';
const baseClass = 'sort-by-pill';
const sortOnOptions = [
    {
        label: (t)=>t('general:name'),
        value: 'name'
    },
    {
        label: (t)=>t('general:createdAt'),
        value: 'createdAt'
    },
    {
        label: (t)=>t('general:updatedAt'),
        value: 'updatedAt'
    }
];
const orderOnOptions = [
    {
        label: (t)=>/*#__PURE__*/ _jsxDEV(_Fragment, {
                children: [
                    /*#__PURE__*/ _jsxDEV(SortUpIcon, {}, void 0, false, {
                        fileName: "src/elements/FolderView/SortByPill/index.tsx",
                        lineNumber: 31,
                        columnNumber: 9
                    }, this),
                    t('general:ascending')
                ]
            }, void 0, true),
        value: 'asc'
    },
    {
        label: (t)=>/*#__PURE__*/ _jsxDEV(_Fragment, {
                children: [
                    /*#__PURE__*/ _jsxDEV(SortDownIcon, {}, void 0, false, {
                        fileName: "src/elements/FolderView/SortByPill/index.tsx",
                        lineNumber: 40,
                        columnNumber: 9
                    }, this),
                    t('general:descending')
                ]
            }, void 0, true),
        value: 'desc'
    }
];
export function SortByPill() {
    const { refineFolderData, sort } = useFolder();
    const { t } = useTranslation();
    const sortDirection = sort.startsWith('-') ? 'desc' : 'asc';
    const [selectedSortOption] = sortOnOptions.filter(({ value })=>value === (sort.startsWith('-') ? sort.slice(1) : sort)) || sortOnOptions;
    const [selectedOrderOption] = orderOnOptions.filter(({ value })=>value === sortDirection);
    return /*#__PURE__*/ _jsxDEV(Popup, {
        button: /*#__PURE__*/ _jsxDEV(Pill, {
            className: `${baseClass}__trigger`,
            icon: /*#__PURE__*/ _jsxDEV(ChevronIcon, {}, void 0, false, {
                fileName: "src/elements/FolderView/SortByPill/index.tsx",
                lineNumber: 59,
                columnNumber: 57
            }, void 0),
            size: "small",
            children: [
                sortDirection === 'asc' ? /*#__PURE__*/ _jsxDEV(SortUpIcon, {
                    className: `${baseClass}__sort-icon`
                }, void 0, false, {
                    fileName: "src/elements/FolderView/SortByPill/index.tsx",
                    lineNumber: 61,
                    columnNumber: 13
                }, void 0) : /*#__PURE__*/ _jsxDEV(SortDownIcon, {
                    className: `${baseClass}__sort-icon`
                }, void 0, false, {
                    fileName: "src/elements/FolderView/SortByPill/index.tsx",
                    lineNumber: 63,
                    columnNumber: 13
                }, void 0),
                selectedSortOption?.label(t)
            ]
        }, void 0, true, {
            fileName: "src/elements/FolderView/SortByPill/index.tsx",
            lineNumber: 59,
            columnNumber: 9
        }, void 0),
        className: baseClass,
        horizontalAlign: "right",
        render: ({ close })=>/*#__PURE__*/ _jsxDEV(_Fragment, {
                children: [
                    /*#__PURE__*/ _jsxDEV(PopupList.GroupLabel, {
                        label: "Sort by"
                    }, void 0, false, {
                        fileName: "src/elements/FolderView/SortByPill/index.tsx",
                        lineNumber: 72,
                        columnNumber: 11
                    }, void 0),
                    /*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
                        children: sortOnOptions.map(({ label, value })=>/*#__PURE__*/ _jsxDEV(PopupList.Button, {
                                active: selectedSortOption?.value === value,
                                onClick: ()=>{
                                    refineFolderData({
                                        query: {
                                            page: '1',
                                            sort: sortDirection === 'desc' ? `-${value}` : value
                                        },
                                        updateURL: true
                                    });
                                    close();
                                },
                                children: label(t)
                            }, value, false, {
                                fileName: "src/elements/FolderView/SortByPill/index.tsx",
                                lineNumber: 75,
                                columnNumber: 15
                            }, void 0))
                    }, void 0, false, {
                        fileName: "src/elements/FolderView/SortByPill/index.tsx",
                        lineNumber: 73,
                        columnNumber: 11
                    }, void 0),
                    /*#__PURE__*/ _jsxDEV(PopupList.Divider, {}, void 0, false, {
                        fileName: "src/elements/FolderView/SortByPill/index.tsx",
                        lineNumber: 93,
                        columnNumber: 11
                    }, void 0),
                    /*#__PURE__*/ _jsxDEV(PopupList.GroupLabel, {
                        label: "Order"
                    }, void 0, false, {
                        fileName: "src/elements/FolderView/SortByPill/index.tsx",
                        lineNumber: 94,
                        columnNumber: 11
                    }, void 0),
                    /*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
                        children: orderOnOptions.map(({ label, value })=>/*#__PURE__*/ _jsxDEV(PopupList.Button, {
                                active: selectedOrderOption?.value === value,
                                className: `${baseClass}__order-option`,
                                onClick: ()=>{
                                    if (sortDirection !== value) {
                                        refineFolderData({
                                            query: {
                                                page: '1',
                                                sort: value === 'desc' ? `-${selectedSortOption?.value}` : selectedSortOption?.value
                                            },
                                            updateURL: true
                                        });
                                        close();
                                    }
                                },
                                children: label(t)
                            }, value, false, {
                                fileName: "src/elements/FolderView/SortByPill/index.tsx",
                                lineNumber: 97,
                                columnNumber: 15
                            }, void 0))
                    }, void 0, false, {
                        fileName: "src/elements/FolderView/SortByPill/index.tsx",
                        lineNumber: 95,
                        columnNumber: 11
                    }, void 0)
                ]
            }, void 0, true),
        showScrollbar: true,
        verticalAlign: "bottom"
    }, void 0, false, {
        fileName: "src/elements/FolderView/SortByPill/index.tsx",
        lineNumber: 57,
        columnNumber: 5
    }, this);
}

//# sourceMappingURL=index.js.map