"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const system_1 = require("@mui/system");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const api_services_1 = require("@selfcommunity/api-services");
const utils_1 = require("@selfcommunity/utils");
const react_core_1 = require("@selfcommunity/react-core");
const Errors_1 = require("../../constants/Errors");
const react_intl_1 = require("react-intl");
const LoadingButton_1 = tslib_1.__importDefault(require("@mui/lab/LoadingButton"));
const PREFIX = 'SCAccountDelete';
const classes = {
    root: `${PREFIX}-root`,
    message: `${PREFIX}-message`,
    confirm: `${PREFIX}-confirm`,
    button: `${PREFIX}-button`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(() => ({}));
/**
 * > API documentation for the Community-JS AccountDelete component. Learn about the available props and the CSS API.
 *
 *
 * This component allows users to display the logic behind user deletion.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/AccountDelete)

 #### Import
 ```jsx
 import {AccountDelete} from '@selfcommunity/react-ui';
 ```

 #### Component Name
 The name `SCAccountDelete` can be used when providing style overrides in the theme.

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCAccountDelete-root|Styles applied to the root element.|
 |message|.SCAccountDelete-message|Styles applied to the message element section.|
 |confirm|.SCAccountDelete-confirm|Styles applied to the confirm element section.|
 |button|.SCAccountDelete-button|Styles applied to the button element.|

 * @param inProps
 */
function AccountDelete(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: PREFIX
    });
    const { className = '', onLogout, onDeleteAccount } = props, rest = tslib_1.__rest(props, ["className", "onLogout", "onDeleteAccount"]);
    // CONTEXT
    const scUserContext = (0, react_core_1.useSCUser)();
    // PREFERENCES
    const scPreferences = (0, react_core_1.useSCPreferences)();
    const communityName = (0, react_1.useMemo)(() => {
        return scPreferences.preferences && react_core_1.SCPreferences.TEXT_APPLICATION_NAME in scPreferences.preferences
            ? scPreferences.preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME].value
            : null;
    }, [scPreferences.preferences]);
    // STATE
    const [isDeleting, setIsDeleting] = (0, react_1.useState)(false);
    const [error, setError] = (0, react_1.useState)(null);
    const [confirm, setConfirm] = (0, react_1.useState)('');
    // CONST
    const authUserId = scUserContext.user ? scUserContext.user.id : null;
    // INTL
    const intl = (0, react_intl_1.useIntl)();
    /**
     * Handle confirm delete account
     */
    const handleDelete = (0, react_1.useCallback)(() => {
        setIsDeleting(true);
        setError(null);
        api_services_1.UserService.userDelete(scUserContext.user.id, 0)
            .then(() => {
            setIsDeleting(false);
            onDeleteAccount && onDeleteAccount(scUserContext.user);
            handleLogout();
        })
            .catch((_error) => {
            setError(intl.formatMessage({ id: 'ui.common.error.action', defaultMessage: 'ui.common.error.action' }));
            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, _error);
        })
            .then(() => setIsDeleting(false));
    }, [setIsDeleting, setError, onDeleteAccount]);
    /**
     * Handle logout
     */
    const handleLogout = (0, react_1.useCallback)(() => {
        scUserContext.logout();
        onLogout && onLogout();
    }, [scUserContext.logout, onLogout]);
    const handleChange = (0, react_1.useCallback)((event) => setConfirm(event.target.value), [setConfirm]);
    /**
     * If there's no authUserId, component is hidden.
     */
    if (!authUserId) {
        return null;
    }
    /**
     * Renders root object
     */
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.message, component: material_1.Box }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.message", defaultMessage: "ui.accountDelete.message", values: {
                        communityName,
                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                        // @ts-ignore
                        li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }),
                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                        // @ts-ignore
                        ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks })
                    } }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.confirm, component: material_1.Box }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.confirmMessage", defaultMessage: "ui.accountDelete.confirmMessage", values: {
                            username: scUserContext.user.username,
                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                            // @ts-ignore
                            b: (chunks) => (0, jsx_runtime_1.jsx)("b", { children: chunks })
                        } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })] })), error && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error })), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }) }))] })));
}
exports.default = AccountDelete;
