"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 Button_1 = tslib_1.__importDefault(require("@mui/material/Button"));
const Typography_1 = tslib_1.__importDefault(require("@mui/material/Typography"));
const material_1 = require("@mui/material");
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const api_services_1 = require("@selfcommunity/api-services");
const react_core_1 = require("@selfcommunity/react-core");
const react_intl_1 = require("react-intl");
const BaseDialog_1 = tslib_1.__importDefault(require("../../../shared/BaseDialog"));
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const CircularProgress_1 = tslib_1.__importDefault(require("@mui/material/CircularProgress"));
const seamless_scroll_polyfill_1 = require("seamless-scroll-polyfill");
const Errors_1 = require("../../../constants/Errors");
const utils_1 = require("@selfcommunity/utils");
const constants_1 = require("../constants");
const classes = {
    dialogRoot: `${constants_1.PREFIX}-dialog-root`,
    upload: `${constants_1.PREFIX}-upload`,
    imagesList: `${constants_1.PREFIX}-images-list`,
    imageItem: `${constants_1.PREFIX}-image-item`,
    primary: `${constants_1.PREFIX}-primary`
};
const Root = (0, styles_1.styled)(BaseDialog_1.default, {
    name: constants_1.PREFIX,
    slot: 'DialogRoot'
})(() => ({}));
function ChangePictureDialog(props) {
    //PROPS
    const { open, onChange, onClose, className } = props, rest = tslib_1.__rest(props, ["open", "onChange", "onClose", "className"]);
    //CONTEXT
    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
    const scContext = (0, react_1.useContext)(react_core_1.SCContext);
    //STATE
    const [file, setFile] = (0, react_1.useState)(scUserContext.user['avatar']);
    const [error, setError] = (0, react_1.useState)(false);
    const [alert, setAlert] = (0, react_1.useState)(false);
    const [primary, setPrimary] = (0, react_1.useState)(null);
    const [avatars, setAvatars] = (0, react_1.useState)([]);
    const [deleteAvatarId, setDeleteAvatarId] = (0, react_1.useState)(null);
    let fileInput = (0, react_1.useRef)(null);
    const [openDeleteAvatarDialog, setOpenDeleteAvatarDialog] = (0, react_1.useState)(false);
    const [isDeletingAvatar, setIsDeletingAvatar] = (0, react_1.useState)(false);
    const [loading, setLoading] = (0, react_1.useState)(false);
    /**
     * Handles open confirm delete avatar dialog
     * @param id
     */
    function handleOpen(id) {
        setOpenDeleteAvatarDialog(true);
        setDeleteAvatarId(id);
    }
    /**
     * Handles avatar upload
     * @param event
     */
    function handleUpload(event) {
        var _a;
        const maxSize = 3 * 1024 * 1024;
        if (event && ((_a = event.target.files[0]) === null || _a === void 0 ? void 0 : _a.size) <= maxSize) {
            fileInput = event.target.files[0];
            setFile(URL.createObjectURL(fileInput));
            handleSave();
        }
        else {
            setAlert(true);
        }
    }
    /**
     * Performs save avatar after upload
     */
    function handleSave() {
        setLoading(true);
        const formData = new FormData();
        formData.append('avatar', fileInput);
        api_services_1.UserService.addUserAvatar(formData, { headers: { 'Content-Type': 'multipart/form-data' } })
            .then((data) => {
            setAvatars((prev) => [...prev, data]);
            selectPrimaryAvatar(data);
            setLoading(false);
            scrollToEndListAvatars();
            setError(false);
        })
            .catch((error) => {
            setError(true);
            setLoading(false);
            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
        });
    }
    /**
     * Handle scroll to the last item added in the list of avatars
     */
    function scrollToEndListAvatars() {
        setTimeout(() => {
            const element = document.getElementById(`avatarsList`);
            if (element) {
                (0, seamless_scroll_polyfill_1.scroll)(element, { top: element.scrollHeight, behavior: 'smooth' });
            }
        }, 200);
    }
    /**
     * Fetches the list of avatars
     */
    const fetchUserAvatars = (next = api_services_1.Endpoints.GetAvatars.url({})) => tslib_1.__awaiter(this, void 0, void 0, function* () {
        const data = yield api_services_1.UserService.getUserAvatars({ url: next });
        return data.next ? data.results.concat(yield fetchUserAvatars(data.next)) : data.results;
    });
    /**
     * Gets the primary avatar from a list of avatars
     * @param data
     */
    function getPrimaryAvatar(data) {
        return data.find((a) => a.primary === true);
    }
    /**
     * Selects primary avatar
     * Only if another avatar is selected (primary !== avatar.id)
     * @param avatar
     */
    function selectPrimaryAvatar(avatar) {
        if (avatar.id !== primary) {
            api_services_1.UserService.setUserPrimaryAvatar(avatar.id, { headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` } })
                .then(() => {
                scUserContext.updateUser({ avatar: avatar.avatar });
                setPrimary(avatar.id);
                onChange && onChange(avatar);
            })
                .catch((error) => {
                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
            });
        }
    }
    /**
     * Handles deletion of a specific avatar
     */
    function deleteAvatar() {
        setIsDeletingAvatar(true);
        api_services_1.UserService.removeUserAvatar(deleteAvatarId, { headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` } })
            .then(() => {
            const _avatars = avatars.filter((a) => a.id !== deleteAvatarId);
            setAvatars(_avatars);
            setIsDeletingAvatar(false);
            setOpenDeleteAvatarDialog(false);
            if (primary === deleteAvatarId) {
                if (_avatars.length > 0) {
                    selectPrimaryAvatar(_avatars[_avatars.length - 1]);
                }
                else {
                    // if there are no more avatars set auto generated image
                    onChange && onChange(null);
                }
            }
        })
            .catch((error) => {
            setOpenDeleteAvatarDialog(false);
            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
        });
    }
    /**
     * On mount, fetches the list of scUser's avatars
     */
    (0, react_1.useEffect)(() => {
        fetchUserAvatars()
            .then((data) => {
            const primary = getPrimaryAvatar(data);
            if (data && data.length) {
                setAvatars(data);
                setPrimary(primary.id);
                setFile(primary.avatar);
            }
        })
            .catch((error) => {
            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
        });
    }, []);
    /**
     * Renders root object
     */
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.dialogRoot, className), title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.upload }, { children: [alert ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "folder_open" }) }, { children: loading ? ((0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15 })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.error", defaultMessage: "ui.changePicture.button.upload.error" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload", defaultMessage: "ui.changePicture.button.upload" })) })) }))] })), (0, jsx_runtime_1.jsx)(Typography_1.default, Object.assign({ component: "span", fontSize: "small", color: "text.secondary", gutterBottom: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.info", defaultMessage: "ui.changePicture.info", values: {
                                // 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.jsx)(material_1.ImageList, Object.assign({ cols: 3, rowHeight: 'auto', id: "avatarsList", classes: { root: classes.imagesList } }, { children: avatars.map((avatar) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.imageItem }, { children: (0, jsx_runtime_1.jsxs)(material_1.ImageListItem, Object.assign({ className: primary === avatar.id ? classes.primary : '', onClick: () => selectPrimaryAvatar(avatar) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar.avatar, loading: "lazy", alt: 'img' }), (0, jsx_runtime_1.jsx)(material_1.ImageListItemBar, { position: "top", actionIcon: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(avatar.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) })) })] }), avatar.id) }), avatar.id))) })), openDeleteAvatarDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteAvatarDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))] })));
}
exports.default = ChangePictureDialog;
