import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import { Box, Typography } from '@mui/material';
import classNames from 'classnames';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
import UserSocialAssociation from '../../UserSocialAssociation';
import { UserService } from '@selfcommunity/api-services';
import { SCOPE_SC_UI } from '../../../constants/Errors';
import { Logger } from '@selfcommunity/utils';
import { useSCUser } from '@selfcommunity/react-core';
import AccountCredentials from './AccountCredentials';
import AccountDataPortabilityButton from '../../AccountDataPortabilityButton';
import AccountDeleteButton from '../../AccountDeleteButton';
import LanguageSwitcher from '../../../shared/LanguageSwitcher';
import { PREFIX } from '../constants';
const messages = defineMessages({
    socialTitle: {
        id: 'ui.userProfileEditAccount.socialAssociations.title',
        defaultMessage: 'ui.userProfileEditAccount.socialAssociations.title'
    },
    dialogTitleMsg: {
        id: 'ui.userProfileEditAccount.socialAssociations.dialog.msg',
        defaultMessage: 'ui.userProfileEditAccount.socialAssociations.dialog.msg'
    },
    deleteDialogMsg: {
        id: 'ui.userProfileEditAccount.socialAssociations.dialog.msg',
        defaultMessage: 'ui.userProfileEditAccount.socialAssociations.dialog.msg'
    }
});
const classes = {
    root: `${PREFIX}-account-root`,
    credentials: `${PREFIX}-credentials`,
    languageSwitcher: `${PREFIX}-language-switcher`,
    dangerZone: `${PREFIX}-danger-zone`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'AccountRoot'
})(() => ({}));
export default function Account(props) {
    // CONTEXT
    const scUserContext = useSCUser();
    // PROPS
    const { className = null, handleAssociationCreate, showSocialAccountSection = true, showCredentialsSection = false, AccountCredentialProps = {}, AccountDeleteButtonProps = {}, showLanguageSwitcher = false, LanguageSwitcherProps = {}, startActions = null, endActions = null } = props, rest = __rest(props, ["className", "handleAssociationCreate", "showSocialAccountSection", "showCredentialsSection", "AccountCredentialProps", "AccountDeleteButtonProps", "showLanguageSwitcher", "LanguageSwitcherProps", "startActions", "endActions"]);
    // STATE
    const [provider, setProvider] = useState(null);
    const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
    const [shouldUpdate, setShouldUpdate] = useState(false);
    // INTL
    const intl = useIntl();
    function handleDelete() {
        const data = { user_id: scUserContext.user.id, provider: provider.provider, ext_id: provider.ext_id };
        UserService.deleteProviderAssociation(data)
            .then(() => {
            setShouldUpdate(true);
            setOpenDeleteDialog(false);
        })
            .catch((error) => {
            console.log(error);
            Logger.error(SCOPE_SC_UI, error);
        });
    }
    const handleOpenDeleteDialog = (p) => {
        setOpenDeleteDialog(true);
        setProvider(p);
    };
    if (!scUserContext.user) {
        return;
    }
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [startActions, showCredentialsSection && _jsx(AccountCredentials, Object.assign({ className: classes.credentials, user: scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user }, AccountCredentialProps)), showLanguageSwitcher && _jsx(LanguageSwitcher, Object.assign({ className: classes.languageSwitcher }, LanguageSwitcherProps)), showSocialAccountSection && (_jsx(UserSocialAssociation, { children: _jsxs(Typography, Object.assign({ variant: "body1", mb: 1, sx: { fontWeight: 'bold' } }, { children: [' ', intl.formatMessage(messages.socialTitle)] })), direction: "row", userId: scUserContext.user.id, onDeleteAssociation: handleOpenDeleteDialog, onCreateAssociation: handleAssociationCreate, deletingProvider: shouldUpdate ? provider : null })), openDeleteDialog && (_jsx(ConfirmDialog, { open: openDeleteDialog, title: intl.formatMessage(messages.dialogTitleMsg, { field: provider.provider }), btnConfirm: _jsx(FormattedMessage, { id: "ui.userProfileEditAccount.socialAssociations.dialog.confirm", defaultMessage: "ui.userProfileEditAccount.socialAssociations.dialog.confirm" }), onConfirm: handleDelete, onClose: () => setOpenDeleteDialog(false) })), endActions, _jsxs(Box, Object.assign({ className: classes.dangerZone }, { children: [_jsx(AccountDataPortabilityButton, { fullWidth: true, variant: "outlined", color: "primary" }), _jsx(AccountDeleteButton, Object.assign({ fullWidth: true, variant: "contained", color: "secondary" }, AccountDeleteButtonProps))] }))] })));
}
