import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled } from '@mui/material/styles';
import { ToggleButton, ToggleButtonGroup } from '@mui/material';
import { useCallback, useEffect, useMemo } from 'react';
import classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import { SCPreferences, UserUtils, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
import { COMPOSER_TYPE_DISCUSSION, COMPOSER_TYPE_POLL, COMPOSER_TYPE_POST } from '../../../constants/Composer';
import { PREFIX } from '../constants';
const classes = {
    root: `${PREFIX}-typeswitch-root`
};
const Root = styled(ToggleButtonGroup, {
    name: PREFIX,
    slot: 'TypeSwitchButtonGroupRoot'
})(() => ({}));
export default function ComposerTypeButtonGroup(props) {
    // Context
    const { preferences } = useSCPreferences();
    const scUserContext = useSCUser();
    // MEMO
    const hasPollType = useMemo(() => preferences[SCPreferences.ADDONS_POLLS_ENABLED].value || UserUtils.isStaff(scUserContext.user), [preferences, scUserContext.user]);
    const hasPostType = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED].value, [preferences]);
    const hasDiscussionType = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED].value, [preferences]);
    // PROPS
    const { className, onChange, value } = props, rest = __rest(props, ["className", "onChange", "value"]);
    // EFFECTS
    useEffect(() => {
        if (value === null) {
            onChange && onChange(hasPostType ? COMPOSER_TYPE_POST : COMPOSER_TYPE_DISCUSSION);
        }
    }, [value]);
    // HANDLERS
    const handleChange = useCallback((event, value) => {
        onChange && onChange(value);
    }, [onChange]);
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onChange: handleChange, exclusive: true, value: value }, rest, { children: [hasPostType && (_jsx(ToggleButton, Object.assign({ value: COMPOSER_TYPE_POST }, { children: _jsx(FormattedMessage, { id: "ui.composer.typeSwitch.post", defaultMessage: "ui.composer.typeSwitch.post" }) }))), hasDiscussionType && (_jsx(ToggleButton, Object.assign({ value: COMPOSER_TYPE_DISCUSSION }, { children: _jsx(FormattedMessage, { id: "ui.composer.typeSwitch.discussion", defaultMessage: "ui.composer.typeSwitch.discussion" }) }))), hasPostType && hasPollType && (_jsx(ToggleButton, Object.assign({ value: COMPOSER_TYPE_POLL }, { children: _jsx(FormattedMessage, { id: "ui.composer.typeSwitch.poll", defaultMessage: "ui.composer.typeSwitch.poll" }) })))] })));
}
