'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import { useRouter } from 'next/navigation.js';
import * as qs from 'qs-esm';
import React, { Fragment } from 'react';
import { useConfig } from '../../providers/Config/index.js';
import { useLocale, useLocaleLoading } from '../../providers/Locale/index.js';
import { useRouteTransition } from '../../providers/RouteTransition/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { Popup, PopupList } from '../Popup/index.js';
import './index.scss';
import { LocalizerLabel } from './LocalizerLabel/index.js';
const baseClass = 'localizer';
export const Localizer = (props)=>{
    const { className } = props;
    const { config: { localization } } = useConfig();
    const router = useRouter();
    const { startRouteTransition } = useRouteTransition();
    const { setLocaleIsLoading } = useLocaleLoading();
    const { i18n } = useTranslation();
    const locale = useLocale();
    if (localization) {
        const { locales } = localization;
        return /*#__PURE__*/ _jsxDEV("div", {
            className: [
                baseClass,
                className
            ].filter(Boolean).join(' '),
            children: /*#__PURE__*/ _jsxDEV(Popup, {
                button: /*#__PURE__*/ _jsxDEV(LocalizerLabel, {}, void 0, false, {
                    fileName: "src/elements/Localizer/index.tsx",
                    lineNumber: 39,
                    columnNumber: 19
                }, void 0),
                horizontalAlign: "right",
                render: ({ close })=>/*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
                        children: locales.map((localeOption)=>{
                            const localeOptionLabel = getTranslation(localeOption.label, i18n);
                            return /*#__PURE__*/ _jsxDEV(PopupList.Button, {
                                active: locale.code === localeOption.code,
                                disabled: locale.code === localeOption.code,
                                onClick: ()=>{
                                    setLocaleIsLoading(true);
                                    close();
                                    // can't use `useSearchParams` here because it is stale due to `window.history.pushState` in `ListQueryProvider`
                                    const searchParams = new URLSearchParams(window.location.search);
                                    const url = qs.stringify({
                                        ...qs.parse(searchParams.toString(), {
                                            depth: 10,
                                            ignoreQueryPrefix: true
                                        }),
                                        locale: localeOption.code
                                    }, {
                                        addQueryPrefix: true
                                    });
                                    startRouteTransition(()=>{
                                        router.push(url);
                                    });
                                },
                                children: localeOptionLabel !== localeOption.code ? /*#__PURE__*/ _jsxDEV(Fragment, {
                                    children: [
                                        localeOptionLabel,
                                        " ",
                                        /*#__PURE__*/ _jsxDEV("span", {
                                            className: `${baseClass}__locale-code`,
                                            "data-locale": localeOption.code,
                                            children: `(${localeOption.code})`
                                        }, void 0, false, {
                                            fileName: "src/elements/Localizer/index.tsx",
                                            lineNumber: 78,
                                            columnNumber: 25
                                        }, void 0)
                                    ]
                                }, void 0, true, {
                                    fileName: "src/elements/Localizer/index.tsx",
                                    lineNumber: 75,
                                    columnNumber: 23
                                }, void 0) : /*#__PURE__*/ _jsxDEV("span", {
                                    className: `${baseClass}__locale-code`,
                                    "data-locale": localeOption.code,
                                    children: localeOptionLabel
                                }, void 0, false, {
                                    fileName: "src/elements/Localizer/index.tsx",
                                    lineNumber: 86,
                                    columnNumber: 23
                                }, void 0)
                            }, localeOption.code, false, {
                                fileName: "src/elements/Localizer/index.tsx",
                                lineNumber: 47,
                                columnNumber: 19
                            }, void 0);
                        })
                    }, void 0, false, {
                        fileName: "src/elements/Localizer/index.tsx",
                        lineNumber: 42,
                        columnNumber: 13
                    }, void 0),
                showScrollbar: true,
                size: "large"
            }, void 0, false, {
                fileName: "src/elements/Localizer/index.tsx",
                lineNumber: 38,
                columnNumber: 9
            }, this)
        }, void 0, false, {
            fileName: "src/elements/Localizer/index.tsx",
            lineNumber: 37,
            columnNumber: 7
        }, this);
    }
    return null;
};

//# sourceMappingURL=index.js.map