'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import React from 'react';
import { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js';
import { useFormProcessing } from '../../forms/Form/context.js';
import { useTranslation } from '../../providers/Translation/index.js';
import './index.scss';
const baseClass = 'loading-overlay';
export const LoadingOverlay = ({ animationDuration, loadingText, overlayType, show = true })=>{
    const { t } = useTranslation();
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            baseClass,
            show ? `${baseClass}--entering` : `${baseClass}--exiting`,
            overlayType ? `${baseClass}--${overlayType}` : ''
        ].filter(Boolean).join(' '),
        style: {
            animationDuration: animationDuration || '500ms'
        },
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__bars`,
                children: [
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__bar`
                    }, void 0, false, {
                        fileName: "src/elements/Loading/index.tsx",
                        lineNumber: 43,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__bar`
                    }, void 0, false, {
                        fileName: "src/elements/Loading/index.tsx",
                        lineNumber: 44,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__bar`
                    }, void 0, false, {
                        fileName: "src/elements/Loading/index.tsx",
                        lineNumber: 45,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__bar`
                    }, void 0, false, {
                        fileName: "src/elements/Loading/index.tsx",
                        lineNumber: 46,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__bar`
                    }, void 0, false, {
                        fileName: "src/elements/Loading/index.tsx",
                        lineNumber: 47,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/Loading/index.tsx",
                lineNumber: 42,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("span", {
                className: `${baseClass}__text`,
                children: loadingText || t('general:loading')
            }, void 0, false, {
                fileName: "src/elements/Loading/index.tsx",
                lineNumber: 50,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/Loading/index.tsx",
        lineNumber: 30,
        columnNumber: 5
    }, this);
};
export const LoadingOverlayToggle = ({ name: key, type = 'fullscreen', loadingText, show })=>{
    const { toggleLoadingOverlay } = useLoadingOverlay();
    React.useEffect(()=>{
        toggleLoadingOverlay({
            type,
            isLoading: show,
            key,
            loadingText: loadingText || undefined
        });
        return ()=>{
            toggleLoadingOverlay({
                type,
                isLoading: false,
                key
            });
        };
    }, [
        show,
        toggleLoadingOverlay,
        key,
        type,
        loadingText
    ]);
    return null;
};
export const FormLoadingOverlayToggle = ({ name, type = 'fullscreen', action, formIsLoading = false, loadingSuffix })=>{
    const isProcessing = useFormProcessing();
    const { i18n, t } = useTranslation();
    const labels = {
        create: t('general:creating'),
        loading: t('general:loading'),
        update: t('general:updating')
    };
    return /*#__PURE__*/ _jsxDEV(LoadingOverlayToggle, {
        loadingText: `${labels[action]} ${loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''}`.trim(),
        name: name,
        show: formIsLoading || isProcessing,
        type: type
    }, void 0, false, {
        fileName: "src/elements/Loading/index.tsx",
        lineNumber: 114,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map