import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import { Box, Typography, Button, Paper, Container, Radio } from '@mui/material';
import Icon from '@mui/material/Icon';
import { PREFIX } from '../constants';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { LiveStreamType } from '../types';
import { useSnackbar } from 'notistack';
import { FormattedMessage } from 'react-intl';
const classes = {
    root: `${PREFIX}-root`,
    options: `${PREFIX}-options`,
    actions: `${PREFIX}-actions`
};
const Root = styled(Container, {
    name: 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 = styled(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 = styled(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 = styled(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
 */
export default function LiveStreamSelector(inProps) {
    //PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, liveSelected, onLiveSelected, onNext } = props, rest = __rest(props, ["className", "liveSelected", "onLiveSelected", "onNext"]);
    // CONTEXT
    const { enqueueSnackbar } = useSnackbar();
    // STATE
    const [selectedOption, setSelectedOption] = useState(liveSelected);
    const options = [
        {
            title: 'Schedule a live event',
            type: 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: [_jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" })]
        },
        {
            title: 'Start a live stream',
            type: 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: [_jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" })]
        }
    ];
    const handleOptionSelect = (type) => {
        setSelectedOption(type);
        onLiveSelected(type);
    };
    const handleNext = () => {
        if (!selectedOption) {
            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error", defaultMessage: "ui.common.error" }), {
                variant: 'error',
                autoHideDuration: 3000
            });
        }
        else {
            onNext && onNext(selectedOption);
        }
    };
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), maxWidth: "lg", sx: { py: 4 } }, { children: [_jsx(Typography, Object.assign({ variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 } }, { children: "How do you want to go live?" })), _jsx(Box, Object.assign({ className: classes.options }, { children: options.map((option, index) => (_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: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", component: "h2", sx: { fontWeight: 500 } }, { children: option.title })), _jsx(Radio, { checked: selectedOption === option.type })] }), _jsx(Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
                                const _Icon = option.icons[featureIndex];
                                return (_jsxs(FeatureItem, Object.assign({ component: "li" }, { children: [_Icon, _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature }))] }), featureIndex));
                            }) }))] }), index))) })), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ disabled: !selectedOption, variant: "contained", onClick: handleNext, color: "secondary" }, { children: "Next" })) }))] })));
}
