import { __awaiter, __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useDisconnectButton } from '@livekit/components-react';
import { useCallback, useMemo, useState } from 'react';
import { LiveStreamApiClient } from '@selfcommunity/api-services';
import { useLiveStream } from './LiveStreamProvider';
import { FormattedMessage } from 'react-intl';
import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
import { useSCUser } from '@selfcommunity/react-core';
import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
/**
 * The `DisconnectButton` is a basic html button with the added ability to disconnect from a LiveKit room.
 * Normally this is the big red button that allows end users to leave the video or audio call.
 */
export const DisconnectButton = 
/* @__PURE__ */ React.forwardRef(function DisconnectButton(props, ref) {
    // CONTEXT
    const { liveStream } = useLiveStream();
    const scUserContext = useSCUser();
    // STATE
    const [closeLive, setCloseLive] = useState(false);
    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
    const [isUpdating, setIsUpdating] = useState(false);
    const { buttonProps } = useDisconnectButton(props);
    const { onClick } = buttonProps, rest = __rest(buttonProps, ["onClick"]);
    /**
     * Intercept fist leave action
     */
    const handleOnLeave = useCallback(() => {
        if (liveStream && scUserContext.user.id === liveStream.host.id) {
            setOpenConfirmDialog(true);
        }
        else {
            onClick === null || onClick === void 0 ? void 0 : onClick();
        }
    }, [setOpenConfirmDialog, liveStream, scUserContext.user]);
    /**
     * Control close live
     */
    const handleChangeCloseLive = useCallback((event) => {
        setCloseLive(event.target.checked);
    }, [closeLive]);
    /**
     * Perform set liveStream as closed
     */
    const performCloseLiveStream = useMemo(() => () => __awaiter(this, void 0, void 0, function* () {
        const res = yield LiveStreamApiClient.close(liveStream.id);
        if (res.status >= 300) {
            return Promise.reject(res);
        }
        return yield Promise.resolve(res.data);
    }), [liveStream]);
    /**
     * Perform patch liveStream before leave the live
     */
    const handleLeaveAction = () => {
        if (!isUpdating && liveStream && scUserContext.user.id === liveStream.host.id && closeLive) {
            setIsUpdating(true);
            performCloseLiveStream()
                .then(() => {
                onClick === null || onClick === void 0 ? void 0 : onClick();
            })
                .catch((error) => {
                console.error(error);
            });
        }
        else {
            onClick === null || onClick === void 0 ? void 0 : onClick();
        }
    };
    return (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ ref: ref }, rest, { onClick: handleOnLeave }, { children: props.children })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(_Fragment, {}), content: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminate", defaultMessage: "ui.liveStreamRoom.live.terminate" }), _jsx(FormGroup, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: closeLive, onChange: handleChangeCloseLive, inputProps: { 'aria-label': 'controlled' } }), label: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminatePermanently", defaultMessage: "ui.liveStreamRoom.live.terminatePermanently" }) }) })] }), onConfirm: handleLeaveAction, isUpdating: isUpdating, onClose: () => setOpenConfirmDialog(false) }))] }));
});
