import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { styled } from '@mui/material/styles';
import { Box, Paper, Typography } from '@mui/material';
import CategoryFollowButton from '../CategoryFollowButton';
import { FormattedMessage } from 'react-intl';
import { useSCFetchCategory } from '@selfcommunity/react-core';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import CategoryFollowersButton from '../CategoryFollowersButton';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-root`,
    cover: `${PREFIX}-cover`,
    name: `${PREFIX}-name`,
    slogan: `${PREFIX}-slogan`,
    info: `${PREFIX}-info`,
    followedCounter: `${PREFIX}-followed-counter`,
    followed: `${PREFIX}-followed`,
    action: `${PREFIX}-action`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 * > API documentation for the Community-JS Category AppBar component. Learn about the available props and the CSS API.
 *
 *
 * This component renders the top section for category pages.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CategoryHeader)
 *
 #### Import
 ```jsx
 import {CategoryHeader} from '@selfcommunity/react-ui';
 ```
 #### Component Name

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

 * #### CSS
 *
 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCCategoryHeader-root|Styles applied to the root element.|
 |cover|.SCCategoryHeader-cover|Styles applied to the cover element.|
 |name|.SCCategoryHeader-name|Styles applied to the name element.|
 |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
 |info|.SCCategoryHeader-info|Styles applied to the info element.|
 |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
 |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
 |action|.SCCategoryHeader-action|Styles applied to the action section.|

 * @param inProps
 */
export default function CategoryHeader(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = __rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
    // STATE
    const { scCategory, setSCCategory } = useSCFetchCategory({ id: categoryId, category });
    /**
     * Handles callback follow/unfollow category
     */
    const handleFollow = (category, follow) => {
        setSCCategory(Object.assign(Object.assign({}, category), { followers_counter: category.followers_counter + (follow ? 1 : -1) }));
    };
    // RENDER
    const _backgroundCover = useMemo(() => (Object.assign({}, (scCategory ? { background: `url('${scCategory.emotional_image_original}') center / cover` } : {}))), [scCategory]);
    if (!scCategory) {
        return null;
    }
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, { style: _backgroundCover, classes: { root: classes.cover } }), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), _jsxs(Box, Object.assign({ className: classes.followed }, { children: [_jsx(Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), _jsx(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] })), _jsx(Box, Object.assign({ className: classes.action }, { children: _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps)) }))] }))] })));
}
