'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
// TODO: abstract the `next/navigation` dependency out from this component
import { usePathname, useRouter, useSearchParams } from 'next/navigation.js';
import { sortableFieldTypes } from 'payload';
import { fieldAffectsData } from 'payload/shared';
import * as qs from 'qs-esm';
import React, { useEffect, useState } from 'react';
import { useTranslation } from '../../providers/Translation/index.js';
import { ReactSelect } from '../ReactSelect/index.js';
import './index.scss';
const baseClass = 'sort-complex';
export const SortComplex = (props)=>{
    const { collection, handleChange, modifySearchQuery = true } = props;
    const router = useRouter();
    const pathname = usePathname();
    const searchParams = useSearchParams();
    const { i18n, t } = useTranslation();
    const [sortOptions, setSortOptions] = useState();
    const [sortFields] = useState(()=>collection.fields.reduce((fields, field)=>{
            if (fieldAffectsData(field) && sortableFieldTypes.indexOf(field.type) > -1) {
                return [
                    ...fields,
                    {
                        label: getTranslation(field.label || field.name, i18n),
                        value: field.name
                    }
                ];
            }
            return fields;
        }, []));
    const [sortField, setSortField] = useState(sortFields[0]);
    const [initialSort] = useState(()=>({
            label: t('general:descending'),
            value: '-'
        }));
    const [sortOrder, setSortOrder] = useState(initialSort);
    useEffect(()=>{
        if (sortField?.value) {
            const newSortValue = `${sortOrder.value}${sortField.value}`;
            if (handleChange) {
                handleChange(newSortValue);
            }
            if (searchParams.get('sort') !== newSortValue && modifySearchQuery) {
                const search = qs.stringify({
                    ...searchParams,
                    sort: newSortValue
                }, {
                    addQueryPrefix: true
                });
                router.replace(`${pathname}${search}`);
            }
        }
    }, [
        pathname,
        router,
        searchParams,
        sortField,
        sortOrder,
        modifySearchQuery,
        handleChange
    ]);
    useEffect(()=>{
        setSortOptions([
            {
                label: t('general:ascending'),
                value: ''
            },
            {
                label: t('general:descending'),
                value: '-'
            }
        ]);
    }, [
        i18n,
        t
    ]);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: baseClass,
        children: /*#__PURE__*/ _jsxDEV(React.Fragment, {
            children: /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__wrap`,
                children: [
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__select`,
                        children: [
                            /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__label`,
                                children: t('general:columnToSort')
                            }, void 0, false, {
                                fileName: "src/elements/SortComplex/index.tsx",
                                lineNumber: 86,
                                columnNumber: 13
                            }, this),
                            /*#__PURE__*/ _jsxDEV(ReactSelect, {
                                onChange: setSortField,
                                options: sortFields,
                                value: sortField
                            }, void 0, false, {
                                fileName: "src/elements/SortComplex/index.tsx",
                                lineNumber: 87,
                                columnNumber: 13
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/SortComplex/index.tsx",
                        lineNumber: 85,
                        columnNumber: 11
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__select`,
                        children: [
                            /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__label`,
                                children: t('general:order')
                            }, void 0, false, {
                                fileName: "src/elements/SortComplex/index.tsx",
                                lineNumber: 90,
                                columnNumber: 13
                            }, this),
                            /*#__PURE__*/ _jsxDEV(ReactSelect, {
                                onChange: (incomingSort)=>{
                                    setSortOrder(incomingSort || initialSort);
                                },
                                options: sortOptions,
                                value: sortOrder
                            }, void 0, false, {
                                fileName: "src/elements/SortComplex/index.tsx",
                                lineNumber: 91,
                                columnNumber: 13
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/SortComplex/index.tsx",
                        lineNumber: 89,
                        columnNumber: 11
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/SortComplex/index.tsx",
                lineNumber: 84,
                columnNumber: 9
            }, this)
        }, void 0, false, {
            fileName: "src/elements/SortComplex/index.tsx",
            lineNumber: 83,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/SortComplex/index.tsx",
        lineNumber: 82,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map