import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
import { Popover } from '../Popover';
import { DefaultState } from './DefaultState';
import { ErrorState } from './ErrorState';
import { LoadingState } from './LoadingState';
import { SuccessState } from './SuccessState';
import { PopoverContent, StyledIconButton, StyledTypography, Wrapper, } from './styles';
import { useLogic } from './useLogic';
export const AutoSaveIndicator = (props) => {
    const { isSuccess, isError, isLoading, errorMsg, onRetry } = props;
    const { popoverProps, handleClose, ref } = useLogic();
    const renderContent = () => {
        if (isLoading) {
            return _jsx(LoadingState, {});
        }
        if (isError) {
            return _jsx(ErrorState, { onRetry: onRetry, errorMsg: errorMsg });
        }
        if (isSuccess) {
            return _jsx(SuccessState, {});
        }
        return _jsx(DefaultState, {});
    };
    return (_jsxs(_Fragment, { children: [_jsx(Wrapper, { ref: ref, children: renderContent() }), _jsx(Popover, { ...popoverProps, anchorOrigin: {
                    vertical: 'bottom',
                    horizontal: 'center',
                }, transformOrigin: {
                    horizontal: 'center',
                    vertical: 'top',
                }, children: _jsxs(PopoverContent, { children: [_jsx(StyledTypography, { children: "\u0418\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u043D\u0430 \u044D\u0442\u043E\u0439 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435 \u0441\u043E\u0445\u0440\u0430\u043D\u044F\u044E\u0442\u0441\u044F \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438" }), _jsx(StyledIconButton, { variant: "text", onClick: handleClose, children: _jsx(CrossOutlineMd, {}) })] }) })] }));
};
