import { getTranslation } from '@payloadcms/translations';
import { useRouter } from 'next/navigation.js';
import React from 'react';
import { useConfig } from '../../providers/Config/index.js';
import { useLocale } from '../../providers/Locale/index.js';
import { useSearchParams } from '../../providers/SearchParams/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import * as PopupList from '../Popup/PopupButtonList/index.js';
import Popup from '../Popup/index.js';
import { LocalizerLabel } from './LocalizerLabel/index.js';
const baseClass = 'localizer';
const Localizer = (props)=>{
    const { className } = props;
    const config = useConfig();
    const { localization } = config;
    const { i18n } = useTranslation();
    const locale = useLocale();
    const { stringifyParams } = useSearchParams();
    const router = useRouter();
    if (localization) {
        const { locales } = localization;
        return /*#__PURE__*/ React.createElement("div", {
            className: [
                baseClass,
                className
            ].filter(Boolean).join(' ')
        }, /*#__PURE__*/ React.createElement(Popup, {
            button: /*#__PURE__*/ React.createElement(LocalizerLabel, null),
            horizontalAlign: "right",
            render: ({ close })=>/*#__PURE__*/ React.createElement(PopupList.ButtonGroup, null, locales.map((localeOption)=>{
                    const localeOptionLabel = getTranslation(localeOption.label, i18n);
                    return /*#__PURE__*/ React.createElement(PopupList.Button, {
                        active: locale.code === localeOption.code,
                        key: localeOption.code,
                        onClick: ()=>{
                            router.replace(stringifyParams({
                                params: {
                                    locale: localeOption.code
                                }
                            }));
                            router.refresh();
                            close();
                        }
                    }, localeOptionLabel, localeOptionLabel !== localeOption.code && ` (${localeOption.code})`);
                })),
            showScrollbar: true,
            size: "large"
        }));
    }
    return null;
};
export default Localizer;

//# sourceMappingURL=index.js.map