import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { PREFIX } from '../../constants';
import { Button, Drawer, IconButton, Paper, Typography } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import PublicInfo from '../../../UserProfileEdit/Section/PublicInfo';
import { SCPreferences, useSCContext, useSCFetchUser, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
import UserAvatar from '../../../../shared/UserAvatar';
import ChangePicture from '../../../ChangePicture';
import ChangeCover from '../../../ChangeCover';
import { DEFAULT_FIELDS } from '../../../../constants/UserProfile';
import Icon from '@mui/material/Icon';
const classes = {
    root: `${PREFIX}-profile-root`,
    title: `${PREFIX}-profile-title`,
    icon: `${PREFIX}-profile-icon`,
    cover: `${PREFIX}-profile-cover`,
    avatar: `${PREFIX}-profile-avatar`,
    changePicture: `${PREFIX}-profile-change-picture`,
    changeCover: `${PREFIX}-profile-change-cover`,
    publicInfo: `${PREFIX}-profile-public-info`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'ProfileRoot'
})(() => ({}));
const DrawerRoot = styled(Drawer, {
    name: PREFIX,
    slot: 'ProfileDrawerRoot'
})(() => ({}));
export default function Profile(inProps) {
    var _a;
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, fields = [...DEFAULT_FIELDS], user = null, onCompleteAction } = props, rest = __rest(props, ["className", "fields", "user", "onCompleteAction"]);
    // STATE
    const [anchorEl, setAnchorEl] = useState(null);
    // PREFERENCES
    const scPreferences = useSCPreferences();
    // CONTEXT
    const scContext = useSCContext();
    const scUserContext = useSCUser();
    // HOOKS
    const { scUser, setSCUser } = useSCFetchUser({ id: (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id, user });
    const hasBadge = scUser && scUser.community_badge;
    // HANDLERS
    const handleOpen = useCallback((event) => {
        setAnchorEl(event.currentTarget);
    }, []);
    const handleClose = useCallback(() => {
        setAnchorEl(null);
    }, []);
    /**
     * Handles Change Avatar
     * If avatar === null reset the avatar with auto-generated image
     * @param avatar
     */
    function handleChangeAvatar(avatar) {
        if (avatar) {
            setSCUser(Object.assign({}, scUser, { avatar: avatar.avatar }));
        }
        else {
            setSCUser(Object.assign({}, scUser, { avatar: `${scContext.settings.portal}/api/v2/avatar/${scUser.id}` }));
        }
        onCompleteAction();
    }
    const _backgroundCover = Object.assign({}, ((scUser === null || scUser === void 0 ? void 0 : scUser.cover)
        ? { background: `url('${scUser.cover}') center / cover` }
        : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
    /**
     * Handles Change Cover
     * Only if scUser.id === scUserContext.user.id
     * @param cover
     */
    function handleChangeCover(cover) {
        setSCUser(Object.assign({}, scUser, { cover: cover }));
        onCompleteAction();
    }
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), _jsx(Typography, Object.assign({ alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), _jsxs(DrawerRoot, Object.assign({ anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsx(IconButton, Object.assign({ className: classes.icon, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) })), _jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge }, { children: _jsx("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), _jsxs(_Fragment, { children: [_jsx(ChangePicture, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeCover, { onChange: handleChangeCover }) }))] })] })), _jsx(Box, Object.assign({ className: classes.publicInfo }, { children: _jsx(PublicInfo, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
}
