"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 material_1 = require("@mui/material");
const api_services_1 = require("@selfcommunity/api-services");
const react_core_1 = require("@selfcommunity/react-core");
const react_intl_1 = require("react-intl");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const system_1 = require("@mui/system");
const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
const constants_1 = require("./constants");
const logo_1 = tslib_1.__importDefault(require("../../assets/logo"));
const Grow_1 = tslib_1.__importDefault(require("@mui/material/Grow"));
const classes = {
    root: `${constants_1.PREFIX}-root`,
    title: `${constants_1.PREFIX}-title`,
    content: `${constants_1.PREFIX}-content`,
    actions: `${constants_1.PREFIX}-actions`,
    action: `${constants_1.PREFIX}-action`,
    actionHighlighted: `${constants_1.PREFIX}-action-highlighted`,
    tutorial: `${constants_1.PREFIX}-tutorial`,
    tutorialContent: `${constants_1.PREFIX}-tutorial-content`,
    tutorialTitle: `${constants_1.PREFIX}-tutorial-title`,
    tutorialTitleClose: `${constants_1.PREFIX}-tutorial-title-close`,
    tutorialDesc: `${constants_1.PREFIX}-tutorial-desc`,
    tutorialOpen: `${constants_1.PREFIX}-tutorial-open`,
    divider: `${constants_1.PREFIX}-divider`,
    tutorialControls: `${constants_1.PREFIX}-tutorial-controls`,
    btnStep: `${constants_1.PREFIX}-btn-step`,
    btnPreviousStep: `${constants_1.PREFIX}-btn-previous-step`,
    btnNextStep: `${constants_1.PREFIX}-btn-next-step`
};
const Root = (0, styles_1.styled)(Widget_1.default, {
    name: constants_1.PREFIX,
    slot: 'Root'
})(({ theme }) => ({
    padding: '0px !important',
    [`&.${classes.tutorialOpen}`]: {
        position: 'relative',
        zIndex: theme.zIndex.drawer + 2,
        [`& .${classes.tutorial}`]: {
            padding: 0
        }
    },
    [`& .${classes.title}`]: {
        display: 'flex',
        justifyContent: 'center',
        marginBottom: theme.spacing(1)
    },
    [`& .${classes.content}`]: {
        padding: `${theme.spacing(2)} 0 0 0`,
        backgroundColor: '#EFEFEF'
    },
    [`& .${classes.actions}`]: {
        display: 'flex',
        paddingBottom: 0,
        boxShadow: 'inset -1px -3px 7px -4px #CECECE',
        '-webkit-overflow-scrolling': 'touch',
        overflowX: 'auto',
        overflowY: 'hidden',
        scrollbarWidth: 'none' /* Firefox */,
        '-ms-overflow-style': 'none' /* IE and Edge */,
        '&::-webkit-scrollbar': {
            display: 'none'
        }
    },
    [`& .${classes.action}`]: {
        padding: `0px 2px ${theme.spacing(2)} 2px`,
        display: 'flex',
        flexGrow: 1,
        justifyContent: 'center',
        '& .MuiButton-root': {
            color: theme.palette.getContrastText(theme.palette.common.white),
            backgroundColor: theme.palette.common.white,
            '&:hover': {
                color: theme.palette.getContrastText(theme.palette.primary.main),
                backgroundColor: theme.palette.primary.main
            }
        }
    },
    [`& .${classes.tutorialContent}`]: {
        width: '100%'
    },
    [`& .${classes.divider}`]: {
        paddingTop: theme.spacing()
    },
    [`& .${classes.tutorialTitle}`]: {
        position: 'relative',
        fontWeight: 700,
        fontSize: 15,
        padding: `${theme.spacing(3)} ${theme.spacing()} ${theme.spacing()} ${theme.spacing(3)}`
    },
    [`& .${classes.tutorialTitleClose}`]: {
        position: 'absolute',
        top: theme.spacing(3),
        right: theme.spacing(3)
    },
    [`& .${classes.tutorialDesc}`]: {
        fontSize: 14,
        fontWeight: 500,
        color: theme.palette.grey[700],
        padding: `0px ${theme.spacing(3)} ${theme.spacing()} ${theme.spacing(3)}`
    },
    [`& .${classes.tutorialControls}`]: {
        padding: theme.spacing(2)
    },
    [`& .${classes.actionHighlighted}`]: {
        position: 'relative',
        '&:before': {
            content: '""',
            display: 'block',
            position: 'absolute',
            bottom: -11,
            width: 10,
            height: 10,
            transform: 'translateY(-50%) rotate(45deg)',
            boxShadow: '0px -20px 20px 0px #CECECE',
            zIndex: 0,
            backgroundColor: theme.palette.common.white
        },
        '& .MuiButton-root': {
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.common.white
        }
    },
    [`& .${classes.btnStep}`]: {
        borderRadius: 3
    }
}));
/**
 * > API documentation for the Community-JS PlatformWidget component. Learn about the available props and the CSS API.
 *
 *
 * This component renders a widget containing the links that allow users and moderators to handle their application content.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Platform)

 #### Import

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

 #### Component Name

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


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCPlatformWidget-root|Styles applied to the root element.|
 |title|.SCPlatformWidget-title|Styles applied to the title element.|
 |actions|.SCPlatformWidget-actions|Styles applied to the actions container.|
 |action|.SCPlatformWidget-action|Styles applied to the single action element.|
 |actionHighlighted|.SCPlatformWidget-action-highlighted|Styles applied to the action highlighted.|
 |tutorial|.SCPlatformWidget-tutorial|Styles applied to the tutorial element.|
 |tutorialContent|.SCPlatformWidget-tutorial-content|Styles applied to the content of the tutorial element.|
 |tutorialTitle|.SCPlatformWidget-tutorial-title|Styles applied to the title element of the tutorial.|
 |tutorialTitleClose|.SCPlatformWidget-tutorial-title-close|Styles applied to the close button of the title in the tutorial.|
 |tutorialDesc|.SCPlatformWidget-tutorial-desc|Styles applied to the tutorial description element.|
 |tutorialOpen|.SCPlatformWidget-tutorial-open|Styles applied to the tutorial element when is active.|
 |divider|.SCPlatformWidget-divider|Styles applied to the divider element in the tutorial container.|
 |tutorialControls|.SCPlatformWidget-tutorial-controls|Styles applied to the tutorial bottom controls.|
 |btnStep|.SCPlatformWidget-btn-step|Styles applied to the button next/previous/skip/close of the tutorial controls.|
 |btnPreviousStep|.SCPlatformWidget-btn-previous-step|Styles applied to the button previous element of the tutorial controls.|
 |btnNextStep|.SCPlatformWidget-btn-next-step|Styles applied to the button next element of the tutorial controls.|

 *
 * @param inProps
 */
function PlatformWidget(inProps) {
    var _a;
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { autoHide, className, title = null, startActions = [], endActions = [], hideConsoleAction = false, hideModerationAction = false, hideHubAction = false, hideContactUsAction = false, onHeightChange } = props, rest = tslib_1.__rest(props, ["autoHide", "className", "title", "startActions", "endActions", "hideConsoleAction", "hideModerationAction", "hideHubAction", "hideContactUsAction", "onHeightChange"]);
    // CONTEXT
    const scContext = (0, react_core_1.useSCContext)();
    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
    // STATE
    const [tutorialIndex, setTutorialIndex] = (0, react_1.useState)(0);
    const [isTutorialOpen, setIsTutorialOpen] = (0, react_1.useState)(false);
    // CONST
    const isAdmin = (0, react_1.useMemo)(() => react_core_1.UserUtils.isAdmin(scUserContext.user), [scUserContext.user]);
    const isEditor = (0, react_1.useMemo)(() => react_core_1.UserUtils.isEditor(scUserContext.user), [scUserContext.user]);
    const isModerator = (0, react_1.useMemo)(() => react_core_1.UserUtils.isModerator(scUserContext.user), [scUserContext.user]);
    const isCommunityOwner = (0, react_1.useMemo)(() => { var _a; return ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === 1; }, [scUserContext.user]);
    const isStage = scContext.settings.portal.includes('stage');
    const actions = [
        ...startActions,
        ...((isAdmin || isEditor) && !hideConsoleAction
            ? [
                {
                    render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }) }))),
                    title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }),
                    content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm.desc", defaultMessage: "ui.platformWidget.adm.desc" })
                }
            ]
            : []),
        ...((isAdmin || isModerator) && !hideModerationAction
            ? [
                {
                    render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('/moderation/flags/') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }) }))),
                    title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }),
                    content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod.desc", defaultMessage: "ui.platformWidget.mod.desc" })
                }
            ]
            : []),
        ...(isAdmin && isCommunityOwner && !hideHubAction
            ? [
                {
                    render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: isStage ? constants_1.HUB_STAGE : constants_1.HUB_PROD, target: "_blank" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }) }))),
                    title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }),
                    content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub.desc", defaultMessage: "ui.platformWidget.hub.desc" })
                }
            ]
            : []),
        ...(isCommunityOwner && !hideContactUsAction
            ? [
                {
                    render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: isStage ? constants_1.CONTACT_STAGE : constants_1.CONTACT_PROD, target: "_blank" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }) }))),
                    title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }),
                    content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs.desc", defaultMessage: "ui.platformWidget.contactUs.desc" })
                }
            ]
            : []),
        ...endActions
    ];
    /**
     * Handle open tutorial
     */
    const handleOpenTutorial = (0, react_1.useCallback)(() => {
        setTutorialIndex(0);
        setIsTutorialOpen(true);
        onHeightChange && onHeightChange();
    }, [setTutorialIndex, setIsTutorialOpen, onHeightChange]);
    /**
     * Handle close tutorial
     */
    const handleCloseTutorial = (0, react_1.useCallback)(() => {
        setIsTutorialOpen(false);
        setTutorialIndex(0);
        onHeightChange && onHeightChange();
    }, [setIsTutorialOpen, setTutorialIndex, onHeightChange]);
    /**
     * Handle next step tutorial
     */
    const handlePrevious = (0, react_1.useCallback)(() => {
        if (tutorialIndex > 0) {
            setTutorialIndex((prev) => prev - 1);
        }
        else {
            handleCloseTutorial();
        }
        onHeightChange && onHeightChange();
    }, [tutorialIndex, setTutorialIndex, handleCloseTutorial, onHeightChange]);
    /**
     * Handle next step tutorial
     */
    const handleNext = (0, react_1.useCallback)(() => {
        if (tutorialIndex < actions.length - 1) {
            setTutorialIndex((prev) => prev + 1);
        }
        else {
            handleCloseTutorial();
        }
        onHeightChange && onHeightChange();
    }, [actions, tutorialIndex, setTutorialIndex, handleCloseTutorial, onHeightChange]);
    /**
     * Fetches platform url
     */
    function fetchPlatform(query) {
        api_services_1.http
            .request({
            url: api_services_1.Endpoints.Platform.url(),
            method: api_services_1.Endpoints.Platform.method,
            params: {
                next: query
            }
        })
            .then((res) => {
            const platformUrl = res.data.platform_url;
            window.open(platformUrl, '_blank').focus();
        })
            .catch((error) => {
            console.log(error);
        });
    }
    /**
     * Render tutorial
     */
    const tutorial = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) }))), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: "auto" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [(0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: true, timeout: 1000 }, { children: (0, jsx_runtime_1.jsx)("span", { children: actions[tutorialIndex].title }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: true, timeout: 1200 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.divider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: (0, classnames_1.default)(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: (0, classnames_1.default)(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
    /**
     * Renders platform card
     */
    const content = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: title ? (title) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: (0, jsx_runtime_1.jsx)("img", { src: logo_1.default, alt: "logo" }) })) }))) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, className: classes.action }), actions.map((a, i) => {
                        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", className: (0, classnames_1.default)(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
                    }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, className: classes.action })] }))] })));
    /**
     * Renders root object (if not hidden by autoHide prop)
     */
    if (!autoHide && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.role)) {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className, { [classes.tutorialOpen]: isTutorialOpen }) }, rest, { children: [content, tutorial] })), (0, jsx_runtime_1.jsx)(material_1.Backdrop, { sx: { color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }, open: isTutorialOpen, onClick: handleCloseTutorial })] }));
    }
    return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
}
exports.default = PlatformWidget;
