"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PREFIX = void 0;
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 Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const system_1 = require("@mui/system");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const types_1 = require("../types");
const notistack_1 = require("notistack");
const react_intl_1 = require("react-intl");
const event_1 = tslib_1.__importDefault(require("../../../assets/liveStream/event"));
const live_1 = tslib_1.__importDefault(require("../../../assets/liveStream/live"));
const api_services_1 = require("@selfcommunity/api-services");
const constants_1 = require("../../LiveStreamRoom/constants");
const react_core_1 = require("@selfcommunity/react-core");
const types_2 = require("@selfcommunity/types");
const constants_2 = require("../../PlatformWidget/constants");
exports.PREFIX = 'SCLiveStreamSelector';
const classes = {
    root: `${exports.PREFIX}-root`,
    warning: `${exports.PREFIX}-warning`,
    options: `${exports.PREFIX}-options`,
    actions: `${exports.PREFIX}-actions`
};
const Root = (0, styles_1.styled)(material_1.Container, {
    name: exports.PREFIX,
    slot: 'Root'
})(({ theme }) => ({}));
// Styled components
const OptionCard = (0, styles_1.styled)(material_1.Paper, {
    name: exports.PREFIX,
    slot: 'optionCardRoot',
    shouldForwardProp: (prop) => prop !== 'selected'
})(({ theme, selected }) => ({}));
const FeatureItem = (0, styles_1.styled)(material_1.Box, {
    name: exports.PREFIX,
    slot: 'featureItemRoot'
})(({ theme }) => ({}));
/**
 *> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
 *
 #### Import
 ```jsx
 import {LiveStreamSelector} from '@selfcommunity/react-ui';
 ```

 #### Component Name
 The name `SCLiveStreamSelector` can be used when providing style overrides in the theme.

 #### CSS

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

 * @param inProps
 */
function LiveStreamSelector(inProps) {
    //PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: exports.PREFIX
    });
    const { className, liveSelected, onLiveSelected, onNext } = props;
    // CONTEXT
    const scContext = (0, react_core_1.useSCContext)();
    const scUserContext = (0, react_core_1.useSCUser)();
    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
    // STATE
    const [selectedOption, setSelectedOption] = (0, react_1.useState)(liveSelected);
    const [timeRemaining, setTimeRemaining] = (0, react_1.useState)(null);
    // HOOKS
    const { preferences } = (0, react_core_1.useSCPreferences)();
    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 isFreeTrialTier = (0, react_1.useMemo)(() => preferences &&
        react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_2.SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
    const intl = (0, react_intl_1.useIntl)();
    const options = [
        {
            title: intl.formatMessage({ id: 'ui.liveStreamForm.selector.scheduleLiveEvent', defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEvent' }),
            image: event_1.default,
            type: types_1.LiveStreamType.EVENT_LIVE,
            features: [
                intl.formatMessage({
                    id: 'ui.liveStreamForm.selector.scheduleLiveEventItem1',
                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem1'
                }),
                intl.formatMessage({
                    id: 'ui.liveStreamForm.selector.scheduleLiveEventItem2',
                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem2'
                }),
                intl.formatMessage({
                    id: 'ui.liveStreamForm.selector.scheduleLiveEventItem3',
                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem3'
                })
            ],
            icons: [(0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" })]
        },
        {
            title: intl.formatMessage({
                id: 'ui.liveStreamForm.selector.scheduleLiveStream',
                defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStream'
            }),
            image: live_1.default,
            type: types_1.LiveStreamType.DIRECT_LIVE,
            features: [
                intl.formatMessage({
                    id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem1',
                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem1'
                }),
                intl.formatMessage({
                    id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem2',
                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem2'
                }),
                intl.formatMessage({
                    id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem3',
                    defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem3'
                })
            ],
            icons: [(0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "chevron_right" })]
        }
    ];
    const handleOptionSelect = (type) => {
        setSelectedOption(type);
        onLiveSelected(type);
    };
    const handleNext = () => {
        if (!selectedOption) {
            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error", defaultMessage: "ui.common.error" }), {
                variant: 'error',
                autoHideDuration: 3000
            });
        }
        else {
            onNext && onNext(selectedOption);
        }
    };
    const fetchLivestreamStatus = () => {
        api_services_1.LiveStreamApiClient.getMonthlyDuration()
            .then((r) => {
            setTimeRemaining(r.remaining_minutes);
        })
            .catch((error) => {
            console.error('Error fetching live status:', error);
        });
    };
    (0, react_1.useEffect)(() => {
        fetchLivestreamStatus();
    }, []);
    const warning = (0, react_1.useMemo)(() => {
        let _message;
        if (isFreeTrialTier && isCommunityOwner) {
            _message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                    // @ts-ignore
                    link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: constants_2.SELFCOMMUNITY_PRICING[scContext.settings.locale.default] }, { children: chunks }))
                } }));
        }
        else if (timeRemaining !== null && timeRemaining <= constants_1.WARNING_THRESHOLD_EXPIRING_SOON) {
            if (timeRemaining <= 1) {
                _message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningMinutesExausted", defaultMessage: "ui.liveStreamForm.selector.warningMinutesExausted" }));
            }
            else if (timeRemaining <= constants_1.WARNING_THRESHOLD_EXPIRING_SOON) {
                _message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningRemainingMinutes", defaultMessage: "ui.liveStreamForm.selector.warningRemainingMinutes", values: { minutes: timeRemaining } }));
            }
        }
        if (_message) {
            return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.warning }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "warning" }, { children: _message })) })));
        }
        return null;
    }, [timeRemaining, isFreeTrialTier]);
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), maxWidth: "lg", sx: { py: 4 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 } }, { children: "How do you want to go live?" })), warning, (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.options }, { children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(OptionCard, Object.assign({ selected: selectedOption === option.type, onClick: () => handleOptionSelect(option.type), elevation: 0, role: "button", tabIndex: 0, onKeyDown: (e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                            handleOptionSelect(index);
                            e.preventDefault();
                        }
                    }, theme: undefined }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", component: "h2", sx: { fontWeight: 500 } }, { children: option.title })), (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: selectedOption === option.type })] }), (0, jsx_runtime_1.jsx)("img", { src: option.image, alt: "logo" }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
                                const _Icon = option.icons[featureIndex];
                                return ((0, jsx_runtime_1.jsxs)(FeatureItem, Object.assign({ component: "li" }, { children: [_Icon, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature }))] }), featureIndex));
                            }) }))] }), index))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: !selectedOption || !timeRemaining || isFreeTrialTier, variant: "contained", onClick: handleNext, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.next", defaultMessage: "ui.liveStreamForm.selector.next" }) })) }))] })));
}
exports.default = LiveStreamSelector;
