"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 Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const constants_1 = require("../constants");
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 classes = {
    root: `${constants_1.PREFIX}-root`,
    options: `${constants_1.PREFIX}-options`,
    actions: `${constants_1.PREFIX}-actions`
};
const Root = (0, styles_1.styled)(material_1.Container, {
    name: constants_1.PREFIX,
    slot: 'Root'
})(({ theme }) => ({
    [`& .${classes.options}`]: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        '& > div': {
            width: '310px'
        }
    },
    [`& .${classes.actions}`]: {
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        marginTop: theme.spacing(4)
    }
}));
// Styled components
const OptionCard = (0, styles_1.styled)(material_1.Paper, {
    shouldForwardProp: (prop) => prop !== 'selected'
})(({ theme, selected }) => ({
    maxWidth: '300px',
    padding: theme.spacing(3),
    margin: theme.spacing(0, 3),
    cursor: 'pointer',
    transition: theme.transitions.create(['background-color', 'box-shadow'], {
        duration: theme.transitions.duration.short
    }),
    backgroundColor: selected ? theme.palette.grey[100] : theme.palette.background.paper,
    '&:hover': {
        backgroundColor: theme.palette.grey[50],
        boxShadow: theme.shadows[2]
    },
    border: `1px solid ${theme.palette.divider}`,
    [`& > div`]: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 2,
        maxWidth: '300px'
    },
    [`& ul`]: {
        marginTop: theme.spacing(2),
        padding: 0,
        listStyle: 'none'
    }
}));
const RadioIndicator = (0, styles_1.styled)(material_1.Radio, {
// shouldForwardProp: (prop) => prop !== 'selected'
})(({ theme, selected }) => ({
/* width: 16,
height: 16,
borderRadius: '50%',
border: `2px solid ${selected ? theme.palette.secondary.main : theme.palette.grey[300]}`,
backgroundColor: selected ? theme.palette.secondary.main : 'transparent',
transition: theme.transitions.create(['border-color', 'background-color'], {
  duration: theme.transitions.duration.shortest
}) */
}));
const FeatureItem = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
    display: 'flex',
    alignItems: 'flex-start',
    gap: theme.spacing(1.5),
    marginBottom: theme.spacing(2),
    '&:last-child': {
        marginBottom: 0
    }
}));
/**
 *> 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: constants_1.PREFIX
    });
    const { className, liveSelected, onLiveSelected, onNext } = props, rest = tslib_1.__rest(props, ["className", "liveSelected", "onLiveSelected", "onNext"]);
    // CONTEXT
    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
    // STATE
    const [selectedOption, setSelectedOption] = (0, react_1.useState)(liveSelected);
    const options = [
        {
            title: 'Schedule a live event',
            type: types_1.LiveStreamType.EVENT_LIVE,
            features: [
                'Schedule a live room or stream in your event space',
                'Allow your members to RSVP, add to calendar, and receive event reminders',
                'Automatically post the event recording to your space',
                'Allow your members to host the event'
            ],
            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: 'Start a live stream',
            type: types_1.LiveStreamType.DIRECT_LIVE,
            features: [
                'Best for webinars, Q&As, AMAs, and for presentations',
                'Up to 100 people',
                'Only co-hosts can talk to each other with audio/video',
                'View-only participants can only chat or be promoted to the stage'
            ],
            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);
        }
    };
    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?" })), (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)(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, variant: "contained", onClick: handleNext, color: "secondary" }, { children: "Next" })) }))] })));
}
exports.default = LiveStreamSelector;
