import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from 'react';
import { styled } from '@mui/material/styles';
import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Typography } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import { SCNotification, useSCUser } from '@selfcommunity/react-core';
import classNames from 'classnames';
import SettingsSkeleton from './SettingsSkeleton';
import { useSnackbar } from 'notistack';
import { DEFAULT_SETTINGS } from '../../../constants/UserProfile';
import { SCUserProfileSettings } from '../../../types';
import { PREFIX } from '../constants';
const classes = {
    root: `${PREFIX}-settings-root`,
    control: `${PREFIX}-control`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'SettingsRoot'
})(() => ({}));
export default function Settings(props) {
    // PROPS
    const { id = null, className = null, settings = [...DEFAULT_SETTINGS], onEditSuccess = null, startActions = null, endActions = null } = props, rest = __rest(props, ["id", "className", "settings", "onEditSuccess", "startActions", "endActions"]);
    // CONTEXT
    const scUserContext = useSCUser();
    // STATE
    const [_settings, setSetting] = useState(null);
    // HOOKS
    const { enqueueSnackbar } = useSnackbar();
    // EFFECTS
    useEffect(() => {
        if (scUserContext.user) {
            setSetting(scUserContext.managers.settings.all());
        }
    }, [scUserContext.user, scUserContext.managers.settings.all]);
    // HANDLERS
    const handleChange = (event) => {
        scUserContext.managers.settings
            .update(event.target.name, parseInt(event.target.value, 10))
            .then((res) => {
            setSetting(res);
            if (onEditSuccess) {
                onEditSuccess();
            }
            else {
                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.userProfileEditSettings.saved", defaultMessage: "ui.userProfileEditSettings.saved" }), {
                    variant: 'success',
                    autoHideDuration: 3000
                });
            }
        })
            .catch((error) => {
            console.log(error);
        });
    };
    // RENDER
    if (!scUserContext.user) {
        return null;
    }
    if (_settings === null) {
        return _jsx(SettingsSkeleton, {});
    }
    const renderSetting = (setting) => {
        switch (setting) {
            case SCUserProfileSettings.NOTIFICATION:
                return (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ gutterBottom: true, variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.notification.title", defaultMessage: "ui.userProfileEditSettings.notification.title" }) })), _jsx(Box, Object.assign({ className: classes.control }, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.notification.label", defaultMessage: "ui.userProfileEditSettings.notification.label" }) }), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "notification settings", value: _settings.show_toast_notifications, name: SCNotification.NOTIFICATIONS_SETTINGS_SHOW_TOAST, onChange: handleChange }, { children: [_jsx(FormControlLabel, { value: 1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.common.yes", defaultMessage: "ui.common.yes" }) }), _jsx(FormControlLabel, { value: 0, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.common.no", defaultMessage: "ui.common.no" }) })] }))] }) }))] }, setting));
            case SCUserProfileSettings.INTERACTION:
                return (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ gutterBottom: true, variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.title", defaultMessage: "ui.userProfileEditSettings.interaction.title" }) })), _jsx(Box, Object.assign({ className: classes.control }, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.label", defaultMessage: "ui.userProfileEditSettings.interaction.label" }) }), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "email notification settings", value: _settings.qa_frequency, name: SCNotification.NOTIFICATIONS_SETTINGS_QA_FREQUENCY, onChange: handleChange }, { children: [_jsx(FormControlLabel, { value: -1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.immediatly", defaultMessage: "ui.userProfileEditSettings.interaction.immediatly" }) }), _jsx(FormControlLabel, { value: 1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.daily", defaultMessage: "ui.userProfileEditSettings.interaction.daily" }) }), _jsx(FormControlLabel, { value: 0, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.never", defaultMessage: "ui.userProfileEditSettings.interaction.never" }) })] }))] }) }))] }, setting));
            case SCUserProfileSettings.PRIVATE_MESSAGE:
                return (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ gutterBottom: true, variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.title", defaultMessage: "ui.userProfileEditSettings.privateMessage.title" }) })), _jsx(Box, Object.assign({ className: classes.control }, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.label", defaultMessage: "ui.userProfileEditSettings.privateMessage.label" }) }), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "email notification settings", value: _settings.email_notification_not_qa, name: SCNotification.NOTIFICATIONS_SETTINGS_EMAIL_NOT_QA, onChange: handleChange }, { children: [_jsx(FormControlLabel, { value: 1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.email", defaultMessage: "ui.userProfileEditSettings.privateMessage.email" }) }), _jsx(FormControlLabel, { value: 0, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.frontend", defaultMessage: "ui.userProfileEditSettings.privateMessage.frontend" }) })] }))] }) }))] }, setting));
            default:
                return null;
        }
    };
    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [startActions, settings.map((setting) => renderSetting(setting)), endActions] })));
}
