import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { styled } from '@mui/material/styles';
import { useSCUser } from '@selfcommunity/react-core';
import { Alert, Box, CircularProgress } from '@mui/material';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import { AccountService } from '@selfcommunity/api-services';
import { FormattedMessage } from 'react-intl';
const PREFIX = 'SCAccountVerify';
const classes = {
    root: `${PREFIX}-root`,
    success: `${PREFIX}-success`,
    error: `${PREFIX}-error`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({
    [`&.${classes.root}`]: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
    }
}));
/**
 * > API documentation for the Community-JS AccountVerify component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {AccountVerify} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCAccountVerify` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCAccountVerify-root|Styles applied to the root element.|
 |success|.SCAccountVerify-success|Styles applied to the success Alert.|
 |error|.SCAccountVerify-error|Styles applied to the error Alert.|

 *
 * @param inProps
 */
export default function AccountVerify(inProps) {
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    // PROPS
    const { className, onSuccess, onError, validationCode, successAction = null, errorAction = null } = props, rest = __rest(props, ["className", "onSuccess", "onError", "validationCode", "successAction", "errorAction"]);
    // STATE
    const [succeed, setSucceed] = useState(false);
    const [error, setError] = useState(false);
    // CONTEXT
    const scUserContext = useSCUser();
    // EFFECTS
    useEffect(() => {
        if (!validationCode) {
            return;
        }
        setError(false);
        AccountService.verify({ validation_code: validationCode })
            .then((res) => {
            setSucceed(res.token ? true : res.user_awaiting_approval);
            onSuccess && onSuccess(res);
        })
            .catch((error) => {
            setError(true);
            onError && onError(error);
        });
    }, [validationCode]);
    if (scUserContext.user !== null) {
        // User already logged in
        return null;
    }
    // RENDER
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: succeed ? (_jsxs(Alert, Object.assign({ severity: "success", className: classes.success }, { children: [typeof succeed === 'string' ? succeed : _jsx(FormattedMessage, { id: "ui.accountVerify.success", defaultMessage: "ui.accountVerify.success" }), successAction] }))) : error ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.error }, { children: [_jsx(FormattedMessage, { id: "ui.accountVerify.error", defaultMessage: "ui.accountVerify.error" }), errorAction] }))) : (_jsxs(_Fragment, { children: [_jsx(CircularProgress, {}), _jsx(FormattedMessage, { id: "ui.accountVerify.verifying", defaultMessage: "ui.accountVerify.verifying" })] })) })));
}
