"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = require("react");
const react_core_1 = require("@selfcommunity/react-core");
const system_1 = require("@mui/system");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const types_1 = require("@selfcommunity/types");
const utils_1 = require("@selfcommunity/utils");
const ComposerIconButton_1 = tslib_1.__importDefault(require("../ComposerIconButton"));
const PREFIX = 'SCBottomNavigation';
const classes = {
    root: `${PREFIX}-root`,
    ios: `${PREFIX}-ios`,
    action: `${PREFIX}-action`,
    composer: `${PREFIX}-composer`
};
const Root = (0, material_1.styled)(material_1.BottomNavigation, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(() => ({}));
/**
 * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
 *
 *
 * This component renders the bottom navigation bar when browsing from mobile.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/BottomNavigation)

 #### Import

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

 #### Component Name

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


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCBottomNavigation-root|Styles applied to the root element.|
 |action|.SCBottomNavigation-action|Styles applied to the action.|
 *
 * @param inProps
 */
function BottomNavigation(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: PREFIX
    });
    const { className, children = null } = props, rest = tslib_1.__rest(props, ["className", "children"]);
    // CONTEXT
    const scUserContext = (0, react_core_1.useSCUser)();
    const scRoutingContext = (0, react_core_1.useSCRouting)();
    // PREFERENCES
    const { preferences, features } = (0, react_core_1.useSCPreferences)();
    // MEMO
    const privateMessagingEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [features]);
    const groupsEnabled = (0, react_1.useMemo)(() => preferences &&
        features &&
        features.includes(types_1.SCFeatureName.TAGGING) &&
        features.includes(types_1.SCFeatureName.GROUPING) &&
        react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
        preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
    const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
        features &&
        features.includes(types_1.SCFeatureName.TAGGING) &&
        react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
        preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
    const exploreStreamEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
    const postOnlyStaffEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
    const contentAvailable = preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
    const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
    // RENDER
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, { [classes.ios]: isIOS }) }, rest, { children: children
            ? children
            : [
                (0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }, "home"),
                (scUserContext.user || contentAvailable) && exploreStreamEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "explore" }) }, "explore")) : null,
                (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
                    ((groupsEnabled && !eventsEnabled) || (!groupsEnabled && eventsEnabled)) &&
                    !exploreStreamEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true }, "composer")) : null,
                groupsEnabled && scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }, "groups")) : null,
                (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
                    groupsEnabled &&
                    eventsEnabled &&
                    !exploreStreamEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true }, "composer")) : null,
                eventsEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }, "events")) : null,
                scUserContext.user && !groupsEnabled && !eventsEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" }) })) }, "notifications")) : null,
                privateMessagingEnabled && scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: 0, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "email" }) })) }, "messages")) : null
            ] })));
}
exports.default = BottomNavigation;
