import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { styled } from '@mui/material/styles';
import { useThemeProps } from '@mui/system';
import { useSCUser } from '@selfcommunity/react-core';
import { SCEventLocationType } from '@selfcommunity/types';
import classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import BaseDialog from '../../shared/BaseDialog';
import { PREFIX } from './constants';
import EventForm from '../EventForm';
import LiveStreamSelector from './LiveStreamSelector/LiveStreamSelector';
import { CreateLiveStreamStep, LiveStreamType } from './types';
import LiveStreamForm from '../LiveStreamForm';
import Slide from '@mui/material/Slide';
import { Box, Button, Icon } from '@mui/material';
const classes = {
    root: `${PREFIX}-root`,
    title: `${PREFIX}-title`,
    content: `${PREFIX}-content`
};
const Root = styled(BaseDialog, {
    name: PREFIX,
    slot: 'Root'
})(({ theme }) => ({
    paddingBottom: '0px !important',
    [`& .${classes.title}`]: {
        display: 'flex'
    },
    [`& .${classes.content}`]: {
        paddingBottom: 0
    }
}));
const Transition = React.forwardRef(function Transition(props, ref) {
    return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
});
/**
 *> API documentation for the Community-JS CreateLiveStreamDialog component. Learn about the available props and the CSS API.
 *
 #### Import
 ```jsx
 import {CreateLivestreamDialog} from '@selfcommunity/react-ui';
 ```

 #### Component Name
 The name `SCCreateLivestreamDialog` 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.|
 |content|.SCCreateLivestreamDialog-content|Styles applied to the content element.|

 * @param inProps
 */
export default function CreateLiveStreamDialog(inProps) {
    var _a, _b;
    //PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, open = true, onClose, onSuccess } = props, rest = __rest(props, ["className", "open", "onClose", "onSuccess"]);
    // CONTEXT
    const scUserContext = useSCUser();
    const canCreateLiveStream = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
    const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
    // STATE
    const [step, setStep] = useState(canCreateEvent ? CreateLiveStreamStep.SELECT_TYPE : CreateLiveStreamStep.CREATE_LIVE);
    const [liveType, setLiveType] = useState(canCreateEvent ? null : LiveStreamType.DIRECT_LIVE);
    // HANDLER
    const handleLiveTypeSelected = useCallback((l) => {
        setLiveType(l);
    }, []);
    const handleLiveTypeSelectedNext = useCallback((l) => {
        setLiveType(l);
        setStep(CreateLiveStreamStep.CREATE_LIVE);
    }, []);
    const handleBack = useCallback((l) => {
        setStep(CreateLiveStreamStep.SELECT_TYPE);
    }, []);
    const handleSubmit = useCallback((e) => {
        onSuccess && onSuccess(e);
    }, []);
    useEffect(() => {
        if (!canCreateEvent) {
            setLiveType(LiveStreamType.DIRECT_LIVE);
        }
    }, [canCreateEvent]);
    // user must be logged
    if (!scUserContext.user || !canCreateLiveStream) {
        return null;
    }
    /**
     * Renders root object
     */
    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: _jsxs(Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === CreateLiveStreamStep.CREATE_LIVE && canCreateEvent) && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: "Back" }))), _jsx(Box, Object.assign({ component: 'span' }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: 'paper', onClose: onClose, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? (_jsx(EventForm, { EventAddressComponentProps: { locations: [SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit })) : (_jsx(LiveStreamForm, { onSuccess: handleSubmit })) }))] })) })));
}
