import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { styled } from '@mui/material/styles';
import { CardContent, Icon, Typography } from '@mui/material';
import classNames from 'classnames';
import Widget from '../Widget';
import { useThemeProps } from '@mui/system';
import { PREFIX } from './constants';
import { FormattedMessage, useIntl } from 'react-intl';
import { SCGroupPrivacyType } from '@selfcommunity/types';
import PubSub from 'pubsub-js';
import { SCPreferences, useSCFetchGroup, useSCPreferences } from '@selfcommunity/react-core';
import GroupInfoWidgetSkeleton from './Skeleton';
import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
import User from '../User';
const classes = {
    root: `${PREFIX}-root`,
    title: `${PREFIX}-title`,
    description: `${PREFIX}-description`,
    privacy: `${PREFIX}-privacy`,
    privacyTitle: `${PREFIX}-privacy-title`,
    visibility: `${PREFIX}-visibility`,
    visibilityTitle: `${PREFIX}-visibility-title`,
    admin: `${PREFIX}-admin`,
    date: `${PREFIX}-date`
};
const Root = styled(Widget, {
    name: PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 * > API documentation for the Community-JS Group Info Widget component. Learn about the available props and the CSS API.
 *
 *
 * This component renders a widget containing the group info.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/GroupInfoWidget)

 #### Import

 ```jsx
 import {GroupInfoWidget} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCGroupInfoWidget` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCGroupInfoWidget-root|Styles applied to the root element.|
 |title|.SCGroupInfoWidget-title|Styles applied to the title element.|

 *
 * @param inProps
 */
export default function GroupInfoWidget(inProps) {
    var _a;
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, group, groupId, onHeightChange, onStateChange } = props, rest = __rest(props, ["className", "group", "groupId", "onHeightChange", "onStateChange"]);
    // HOOKS
    const { scGroup, setSCGroup } = useSCFetchGroup({ id: groupId, group });
    // INTL
    const intl = useIntl();
    // REFS
    const updatesSubscription = useRef(null);
    // PREFERENCES
    const scPreferences = useSCPreferences();
    const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
    const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
    /**
     * Subscriber for pubsub callback
     */
    const onChangeGroupHandler = useCallback((_msg, data) => {
        if (data && scGroup.id === data.id) {
            setSCGroup(data);
        }
    }, [scGroup, setSCGroup]);
    /**
     * On mount, subscribe to receive groups updates (only edit)
     */
    useEffect(() => {
        if (scGroup) {
            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.GROUP}.${SCGroupEventType.EDIT}`, onChangeGroupHandler);
        }
        return () => {
            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
        };
    }, [scGroup]);
    /**
     * Loading group
     */
    if (!scGroup) {
        return _jsx(GroupInfoWidgetSkeleton, {});
    }
    /**
     * Renders root object
     */
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.title", defaultMessage: "ui.groupInfoWidget.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.description }, { children: scGroup.description })), privateEnabled && (_jsx(Typography, Object.assign({ component: "div", className: classes.privacy }, { children: scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.privacyTitle }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.public", defaultMessage: "ui.groupInfoWidget.privacy.public" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.public.info", defaultMessage: "ui.groupInfoWidget.privacy.public.info", values: {
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        b: (chunks) => _jsx("strong", { children: chunks })
                                    } }) }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.privacyTitle }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.private", defaultMessage: "ui.groupInfoWidget.privacy.private" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.privacy.private.info", defaultMessage: "ui.groupInfoWidget.private.public.info", values: {
                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                        // @ts-ignore
                                        b: (chunks) => _jsx("strong", { children: chunks })
                                    } }) }))] })) }))), privateEnabled && visibilityEnabled && (_jsx(_Fragment, { children: scGroup.privacy === SCGroupPrivacyType.PRIVATE && (_jsx(Typography, Object.assign({ component: "div", className: classes.visibility }, { children: scGroup.visible ? (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.visibilityTitle }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                            // @ts-ignore
                                            b: (chunks) => _jsx("strong", { children: chunks })
                                        } }) }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ className: classes.visibilityTitle }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                            // @ts-ignore
                                            b: (chunks) => _jsx("strong", { children: chunks })
                                        } }) }))] })) }))) })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.date }, { children: _jsx(FormattedMessage, { id: "ui.groupInfoWidget.date", defaultMessage: "ui.groupInfoWidget.date", values: { date: intl.formatDate(scGroup.created_at, { day: 'numeric', year: 'numeric', month: 'long' }) } }) })), _jsxs(Typography, Object.assign({ component: "div", className: classes.admin }, { children: [_jsx(FormattedMessage, { id: "ui.groupInfoWidget.admin", defaultMessage: "ui.groupInfoWidget.admin", values: {
                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                // @ts-ignore
                                b: (chunks) => _jsx("strong", { children: chunks })
                            } }), _jsx(User, { userId: (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id, elevation: 0, actions: _jsx(_Fragment, {}) })] }))] }) })));
}
