import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useContext, } from 'react';
import { useTranslation } from 'react-i18next';
import { Tooltip } from 'antd';
import { WarningOutlined } from '@ant-design/icons';
import { useSaveProject } from '../../../../hooks/use-save-project';
import { NeedsReloadContext } from '../../../../providers';
import { ReloadButtonStyled, IconCSS } from './reload-button.style';
export const ReloadButton = () => {
    const { t } = useTranslation();
    const { needsReload } = useContext(NeedsReloadContext);
    const { save } = useSaveProject();
    const handleClick = useCallback(() => {
        save();
        window.location.reload();
    }, []);
    if (!needsReload) {
        return null;
    }
    return (_jsx(Tooltip, { title: t('bottomBar.reloadWarning.button.tooltip'), children: _jsxs(ReloadButtonStyled, { onClick: handleClick, children: [_jsx(WarningOutlined, { css: IconCSS }), t('bottomBar.reloadWarning.button.title')] }) }));
};
