"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 styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_intl_1 = require("react-intl");
const api_services_1 = require("@selfcommunity/api-services");
const Errors_1 = require("../../../constants/Errors");
const utils_1 = require("@selfcommunity/utils");
const BaseDialog_1 = tslib_1.__importDefault(require("../../../shared/BaseDialog"));
const PasswordTextField_1 = tslib_1.__importDefault(require("../../../shared/PasswordTextField"));
const EmailTextField_1 = tslib_1.__importDefault(require("../../../shared/EmailTextField"));
const lab_1 = require("@mui/lab");
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const notistack_1 = require("notistack");
const constants_1 = require("../constants");
const messages = (0, react_intl_1.defineMessages)({
    changePasswordTitle: {
        id: 'ui.userProfileEditAccountCredentials.changePassword',
        defaultMessage: 'ui.userProfileEditAccountCredentials.changePassword'
    },
    confirmPasswordError: {
        id: 'ui.userProfileEditAccountCredentials.confirmPassword.error',
        defaultMessage: 'ui.userProfileEditAccountCredentials.confirmPassword.error'
    }
});
const classes = {
    root: `${constants_1.PREFIX}-account-credentials-root`,
    email: `${constants_1.PREFIX}-email`,
    success: `${constants_1.PREFIX}-success`,
    error: `${constants_1.PREFIX}-error`,
    dialogRoot: `${constants_1.PREFIX}-password-dialog-root`,
    form: `${constants_1.PREFIX}-password-form`,
    formField: `${constants_1.PREFIX}-form-field`,
    password: `${constants_1.PREFIX}-password`,
    confirmChangeButton: `${constants_1.PREFIX}-confirm-change-button`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'AccountCredentialsRoot'
})(() => ({}));
const PasswordDialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
    name: constants_1.PREFIX,
    slot: 'PasswordDialogRoot'
})(() => ({}));
function AccountCredentials(props) {
    var _a;
    // PROPS
    const { className = null, user, skipEmailValidation = false } = props, rest = tslib_1.__rest(props, ["className", "user", "skipEmailValidation"]);
    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
    // STATE
    const [openChangePasswordDialog, setOpenChangePasswordDialog] = (0, react_1.useState)(false);
    const initialFieldState = {
        email: (_a = user === null || user === void 0 ? void 0 : user.email) !== null && _a !== void 0 ? _a : '',
        password: '',
        newPassword: '',
        confirmPassword: ''
    };
    const initialErrorState = {
        email: '',
        password: '',
        newPassword: '',
        confirmPassword: ''
    };
    const [field, setField] = (0, react_1.useState)(initialFieldState);
    const [error, setError] = (0, react_1.useState)(initialErrorState);
    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
    const [isSubmittingPassword, setIsSubmittingPassword] = (0, react_1.useState)(false);
    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
    const open = Boolean(anchorEl);
    // INTL
    const intl = (0, react_intl_1.useIntl)();
    // HANDLERS
    const handlePopoverOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handlePopoverClose = () => {
        setAnchorEl(null);
    };
    const handleChange = (event) => {
        const { name, value } = event.target;
        setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
        if (!value) {
            setError((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
        }
        else {
            setError((prev) => (Object.assign(Object.assign({}, prev), { [name]: '' })));
        }
    };
    const handleEmailBlur = (e) => {
        if (!e.target.value) {
            setField((prev) => (Object.assign(Object.assign({}, prev), { ['email']: user === null || user === void 0 ? void 0 : user.email })));
            setIsEditing(false);
        }
    };
    const validateInput = () => {
        if (field.newPassword !== field.confirmPassword) {
            setError((prev) => (Object.assign(Object.assign({}, prev), { ['confirmPassword']: intl.formatMessage(messages.confirmPasswordError) })));
        }
    };
    const handleCloseDialog = () => {
        setOpenChangePasswordDialog(false);
        setField(initialFieldState);
        setError(initialErrorState);
    };
    const handleSubmitPassword = (event) => {
        event.preventDefault();
        event.stopPropagation();
        setIsSubmittingPassword(true);
        api_services_1.UserService.changeUserPassword(user === null || user === void 0 ? void 0 : user.id, field.password, field.newPassword)
            .then(() => {
            setIsSubmittingPassword(false);
            handleCloseDialog();
        })
            .catch((error) => {
            setIsSubmittingPassword(false);
            const _error = (0, api_services_1.formatHttpErrorCode)(error);
            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
            if (_error.passwordError) {
                setError((prev) => (Object.assign(Object.assign({}, prev), { ['password']: _error.passwordError.error })));
            }
            if (_error.newPasswordError) {
                setError((prev) => (Object.assign(Object.assign({}, prev), { ['newPassword']: _error.newPasswordError.error })));
            }
        });
    };
    const handleSubmitEmail = (e) => {
        e.preventDefault();
        e.stopPropagation();
        setIsSubmitting(true);
        api_services_1.UserService.changeUserMail(user === null || user === void 0 ? void 0 : user.id, field.email, !skipEmailValidation, !skipEmailValidation)
            .then((res) => {
            setIsEditing(false);
            setIsSubmitting(false);
            if (skipEmailValidation) {
                enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email.success", defaultMessage: "ui.userProfileEditAccountCredentials.email.success" }), {
                    variant: 'success',
                    autoHideDuration: 3000
                });
            }
            else {
                enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email.successConfirm", defaultMessage: "ui.userProfileEditAccountCredentials.email.successConfirm" }), {
                    variant: 'warning',
                    autoHideDuration: 5000
                });
            }
        })
            .catch((error) => {
            setIsSubmitting(false);
            const _error = (0, api_services_1.formatHttpErrorCode)(error);
            setError((prev) => (Object.assign(Object.assign({}, prev), { ['email']: _error.newEmailError ? `newEmailError.${_error.newEmailError.error}` : _error.error })));
        });
    };
    if (!user) {
        return;
    }
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.email }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email", defaultMessage: "ui.userProfileEditAccountCredentials.email" }) })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSubmitting ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(EmailTextField_1.default, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.email.error.${error.email}`, defaultMessage: `ui.userProfileEditAccountCredentials.email.error.${error.email}` })), InputProps: {
                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: !isEditing ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setIsEditing(true), edge: "end" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "edit" }) }))) : error.email ? ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ color: "error" }, { children: "error" }))) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "check" }) }))) })))
                                } }) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.password }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.passwordLabel", defaultMessage: "ui.userProfileEditAccountCredentials.passwordLabel" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", onClick: () => setOpenChangePasswordDialog(true), sx: { mb: 1 } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] }), openChangePasswordDialog && ((0, jsx_runtime_1.jsxs)(PasswordDialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.password.error.${error.password}`, defaultMessage: `ui.userProfileEditAccountCredentials.password.error.${error.password}` })) }), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}`, defaultMessage: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}` })), InputProps: {
                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "info" }) })) })))
                                } }), (0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: open, anchorEl: anchorEl, anchorOrigin: {
                                    vertical: 'center',
                                    horizontal: 'left'
                                }, transformOrigin: {
                                    vertical: 'center',
                                    horizontal: 'right'
                                }, onClose: handlePopoverClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })] })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
}
exports.default = AccountCredentials;
