"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const react_intl_1 = require("react-intl");
const material_1 = require("@mui/material");
const api_services_1 = require("@selfcommunity/api-services");
const utils_1 = require("@selfcommunity/utils");
const react_core_1 = require("@selfcommunity/react-core");
const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const Incubator_1 = tslib_1.__importDefault(require("../Incubator"));
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const AvatarGroupSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/AvatarGroupSkeleton"));
const CentralProgress_1 = tslib_1.__importDefault(require("../../shared/CentralProgress"));
const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
const User_1 = tslib_1.__importDefault(require("../User"));
const Errors_1 = require("../../constants/Errors");
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const SocialShare_1 = require("../../constants/SocialShare");
const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
const messages = (0, react_intl_1.defineMessages)({
    intro: {
        id: 'ui.incubatorDetail.intro',
        defaultMessage: 'ui.incubatorDetail.intro'
    }
});
const PREFIX = 'SCIncubatorDetail';
const classes = {
    root: `${PREFIX}-root`,
    avatar: `${PREFIX}-avatar`,
    title: `${PREFIX}-title`,
    author: `${PREFIX}-author`,
    shareCard: `${PREFIX}-share-card`,
    copyUrlForm: `${PREFIX}-copy-url-form`,
    copyButton: `${PREFIX}-copy-button`,
    copyText: `${PREFIX}-copy-text`,
    shareSection: `${PREFIX}-share-section`,
    socialShareButton: `${PREFIX}-social-share-button`,
    subscribers: `${PREFIX}-subscribers`,
    shareMenuIcon: `${PREFIX}-share-Menu-icon`
};
const Root = (0, styles_1.styled)(BaseDialog_1.default, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({
    ' & .MuiCardContent-root': {
        '&:last-child': {
            paddingBottom: 0
        }
    },
    [theme.breakpoints.down(500)]: {
        minWidth: 300
    },
    [`& .${classes.avatar}`]: {
        marginRight: theme.spacing(1),
        marginBottom: theme.spacing(3)
    },
    [`& .${classes.title}`]: {
        fontSize: '1rem',
        whiteSpace: 'pre-line'
    },
    [`& .${classes.copyUrlForm}`]: {
        flexDirection: 'row',
        marginBottom: theme.spacing(1)
    },
    [`& .${classes.copyButton}`]: {
        borderRadius: 0
    },
    [`& .${classes.copyText}`]: {
        width: '80%',
        '& .MuiInputBase-root': {
            borderRadius: 0,
            '& .MuiOutlinedInput-input': {
                padding: theme.spacing(1)
            }
        }
    },
    [`& .${classes.shareSection}`]: {
        display: 'flex',
        gap: theme.spacing(),
        marginTop: theme.spacing(),
        marginBottom: theme.spacing(3)
    },
    [`& .${classes.socialShareButton}`]: {
        marginRight: theme.spacing()
    },
    [`& .${classes.subscribers}`]: {
        marginTop: theme.spacing(),
        '& .MuiAvatar-root': {
            color: theme.palette.common.white,
            border: '2px solid #FFF'
        }
    }
}));
/**
 * > API documentation for the Community-JS Incubator Detail component. Learn about the available props and the CSS API.

 #### Import
 ```jsx
 import {IncubatorDetail} from '@selfcommunity/react-ui';
 ```
 #### Component Name
 The name `SCIncubatorDetail` can be used when providing style overrides in the theme.

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCIncubatorDetail-root|Styles applied to the root element.|
 |avatar|.SCIncubatorDetail-avatar|Styles applied to the avatar element.|
 |title|.SCIncubatorDetail-title|Styles applied to the title element.|
 |author|.SCIncubatorDetail-author|Styles applied to the author element.|
 |shareCard|.SCIncubatorDetail-share-card|Styles applied to the  section card.|
 |copyUrlForm|.SCIncubatorDetail-copy-url-form|Styles applied to the url copy section.|
 |copyButton|.SCIncubatorDetail-copy-button|Styles applied to the copy button element.|
 |copyText|.SCIncubatorDetail-copy-text|Styles applied to the text copy element.|
 |shareSection|.SCIncubatorDetail-share-section|Styles applied to the social share section.|
 |socialShareButton|.SCIncubatorDetail-social-share-button|Styles applied to the social share button.|
 |subscribers|.SCIncubatorDetail-subscribers|Styles applied to the subscribers avatar section.|
* @param inProps
*/
function IncubatorDetail(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: PREFIX
    });
    const { incubator, incubatorId, className, open, onClose, IncubatorProps = {}, onSubscriptionsUpdate } = props, rest = tslib_1.__rest(props, ["incubator", "incubatorId", "className", "open", "onClose", "IncubatorProps", "onSubscriptionsUpdate"]);
    // STATE
    const [alert, setAlert] = (0, react_1.useState)(false);
    const { scIncubator, setSCIncubator } = (0, react_core_1.useSCFetchIncubator)({ id: incubator.id, incubator });
    const [loading, setLoading] = (0, react_1.useState)(true);
    const [next, setNext] = (0, react_1.useState)(incubator.id || scIncubator ? `${api_services_1.Endpoints.GetIncubatorSubscribers.url({ id: incubator ? incubator.id : scIncubator.id })}?limit=10` : null);
    const [total, setTotal] = (0, react_1.useState)(0);
    const [subscribers, setSubscribers] = (0, react_1.useState)([]);
    const [openSubscribersDialog, setOpenSubscribersDialog] = (0, react_1.useState)(false);
    const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
    // CONTEXT
    const scUserContext = (0, react_core_1.useSCUser)();
    const scContext = (0, react_core_1.useSCContext)();
    const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
    const facebookShareEnabled = react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED in scPreferencesContext.preferences &&
        scPreferencesContext.preferences[react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED].value;
    const xShareEnabled = react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED in scPreferencesContext.preferences &&
        scPreferencesContext.preferences[react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED].value;
    const linkedinShareEnabled = react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_LINKEDIN_ENABLED in scPreferencesContext.preferences &&
        scPreferencesContext.preferences[react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_LINKEDIN_ENABLED].value;
    const scRoutingContext = (0, react_core_1.useSCRouting)();
    const portal = scContext.settings.portal + scRoutingContext.url(react_core_1.SCRoutes.INCUBATOR_ROUTE_NAME, scIncubator);
    const isSocialShareEnabled = facebookShareEnabled || xShareEnabled || linkedinShareEnabled;
    // INTL
    const intl = (0, react_intl_1.useIntl)();
    // HANDLERS
    /**
     * Copies incubator path on clipboard and notifies user
     */
    const copy = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
        yield navigator.clipboard.writeText(portal);
        setAlert(true);
    });
    /**
     * Opens subscribers dialog
     */
    function handleToggleSubscribersDialog() {
        setOpenSubscribersDialog((prev) => !prev);
    }
    /**
     * Handles incubator subscribe/unsubscribe callback
     */
    function handleSubscribersUpdate(incubator, subscribed) {
        let _subscribers = [];
        if (subscribed) {
            _subscribers = [...[scUserContext.user], ...subscribers];
        }
        else {
            if (total < 5) {
                _subscribers = [...subscribers.filter((u) => u.id !== scUserContext.user.id)];
            }
            else {
                const _pSubscribers = subscribers.slice(0, 5).filter((u) => u.id !== scUserContext.user.id);
                _subscribers = [..._pSubscribers, ...subscribers.slice(5)];
            }
        }
        setTotal((prev) => prev + (subscribed ? 1 : -1));
        setSubscribers(_subscribers);
        setNext(null);
    }
    /**
     * Handles subscription counter and subscribers update callbacks on subscribe/unsubscribe action
     */
    const handleUpdates = (incubator, subscribed) => {
        onSubscriptionsUpdate(incubator);
        handleSubscribersUpdate(incubator, subscribed);
    };
    /**
     * If id attempts to get the incubator by id
     */
    (0, react_1.useEffect)(() => {
        if (scIncubator) {
            fetchSubscribers();
        }
    }, [scIncubator]);
    /**
     * Fetches incubator subscribers
     */
    const fetchSubscribers = (0, react_1.useMemo)(() => () => {
        if (next) {
            api_services_1.http
                .request({
                url: next,
                method: api_services_1.Endpoints.GetIncubatorSubscribers.method
            })
                .then((res) => {
                if (res.status < 300) {
                    setSubscribers([...subscribers, ...res.data.results]);
                    setTotal(res.data['count']);
                    setNext(res.data['next']);
                    setLoading(false);
                }
            })
                .catch((error) => {
                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
            });
        }
    }, [scIncubator, next, loading]);
    /**
     * If not incubator object returns null
     */
    if (!scIncubator) {
        return null;
    }
    /**
     * Renders root element
     */
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, alt: scIncubator.user.avatar, src: scIncubator.user.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title }, { children: [`${intl.formatMessage(messages.intro, { name: scIncubator.name })}`, " "] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span' }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({}, (!scIncubator.user.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scIncubator.user) }), { onClick: scIncubator.user.deleted ? () => setOpenAlert(true) : null }, { children: ["@", scIncubator.user.username] })) }))] })] }), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(Incubator_1.default, Object.assign({ elevation: 0, incubator: scIncubator, detailView: true, subscribeButtonProps: { onSubscribe: handleUpdates } }, IncubatorProps)), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.subscribers }, { children: loading && !scIncubator ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: total > 0 ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleSubscribersDialog, disabled: loading || !scIncubator }, { children: (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, Object.assign({}, rest, { children: [subscribers.map((u) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: u.username, src: u.avatar }, u.id))), [...Array(Math.max(0, total - subscribers.length))].map((x, i // Add max to 0 to prevent creation of array with negative index during state update
                                            ) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, {}, i)))] })) }))) : null })) })), openSubscribersDialog && ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubatorDetail.subscribersSection.title", id: "ui.incubatorDetail.subscribersSection.title" }), " (", total, ")"] }), onClose: handleToggleSubscribersDialog, open: openSubscribersDialog }, { children: loading ? ((0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 50 })) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: total, next: fetchSubscribers, hasMoreNext: next !== null, loaderNext: (0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 30 }), height: 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.subscribersSection.noMoreSubscribers", defaultMessage: "ui.incubatorDetail.subscribersSection.noMoreSubscribers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: subscribers.map((s, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: s }, index) }, (s.id, index)))) }) }))) }))), (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ elevation: 1, className: classes.shareCard }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'h6' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.title", defaultMessage: "ui.incubatorDetail.shareSection.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'subtitle1' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.share", defaultMessage: "ui.incubatorDetail.shareSection.share" }) })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.copyUrlForm }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.copyText, variant: "outlined", value: portal }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.copyButton, variant: "contained", onClick: copy }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.button.copy", defaultMessage: "ui.incubatorDetail.shareSection.button.copy" }) }))] })), alert && ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ onClose: () => setAlert(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.copied", defaultMessage: "ui.incubatorDetail.shareSection.copied" }) }))), isSocialShareEnabled && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'subtitle2' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.invite", defaultMessage: "ui.incubatorDetail.shareSection.invite" }) }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.shareSection }, { children: [facebookShareEnabled && ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.FACEBOOK_SHARE + portal, 'facebook-share-dialog', 'width=626,height=436') }, { children: "facebook" }))), xShareEnabled && ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.X_SHARE + portal, 'x-share-dialog', 'width=626,height=436') }, { children: "x" }))), linkedinShareEnabled && ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.LINKEDIN_SHARE + portal, 'linkedin-share-dialog', 'width=626,height=436') }, { children: "linkedin" })))] }))] }) }))] }) })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
}
exports.default = IncubatorDetail;
