import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Track } from 'livekit-client';
import * as React from 'react';
import { supportsScreenSharing } from '@livekit/components-core';
import { ChatIcon, ChatToggle, GearIcon, LeaveIcon, MediaDeviceMenu, StartMediaButton, useLocalParticipantPermissions, useMaybeLayoutContext, usePersistentUserChoices } from '@livekit/components-react';
import { TrackToggle } from './TrackToggle';
import { useMediaQuery } from '@mui/material';
import { SettingsMenuToggle } from './SettingsMenuToggle';
import { DisconnectButton } from './DisconnectButton';
import { mergeProps } from './utils';
/**
 * The `ControlBar` prefab gives the user the basic user interface to control their
 * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
 */
export function ControlBar(_a) {
    var _b, _c, _d, _e, _f;
    var { variation, controls, saveUserChoices = true, onDeviceError } = _a, props = __rest(_a, ["variation", "controls", "saveUserChoices", "onDeviceError"]);
    const [isChatOpen, setIsChatOpen] = React.useState(false);
    const layoutContext = useMaybeLayoutContext();
    React.useEffect(() => {
        var _a, _b;
        if (((_a = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.widget.state) === null || _a === void 0 ? void 0 : _a.showChat) !== undefined) {
            setIsChatOpen((_b = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.widget.state) === null || _b === void 0 ? void 0 : _b.showChat);
        }
    }, [(_b = layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.widget.state) === null || _b === void 0 ? void 0 : _b.showChat]);
    const isTooLittleSpace = useMediaQuery(`(max-width: ${isChatOpen ? 1000 : 760}px)`);
    const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose';
    variation !== null && variation !== void 0 ? variation : (variation = defaultVariation);
    const visibleControls = Object.assign({ leave: true }, controls);
    const localPermissions = useLocalParticipantPermissions();
    if (!localPermissions) {
        visibleControls.camera = false;
        visibleControls.chat = false;
        visibleControls.microphone = false;
        visibleControls.screenShare = false;
    }
    else {
        (_c = visibleControls.camera) !== null && _c !== void 0 ? _c : (visibleControls.camera = localPermissions.canPublish);
        (_d = visibleControls.microphone) !== null && _d !== void 0 ? _d : (visibleControls.microphone = localPermissions.canPublish);
        (_e = visibleControls.screenShare) !== null && _e !== void 0 ? _e : (visibleControls.screenShare = localPermissions.canPublish);
        (_f = visibleControls.chat) !== null && _f !== void 0 ? _f : (visibleControls.chat = localPermissions.canPublishData && (controls === null || controls === void 0 ? void 0 : controls.chat));
    }
    const showIcon = React.useMemo(() => variation === 'minimal' || variation === 'verbose', [variation]);
    const showText = React.useMemo(() => variation === 'textOnly' || variation === 'verbose', [variation]);
    const browserSupportsScreenSharing = supportsScreenSharing();
    const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false);
    const onScreenShareChange = React.useCallback((enabled) => {
        setIsScreenShareEnabled(enabled);
    }, [setIsScreenShareEnabled]);
    const htmlProps = mergeProps({ className: 'lk-control-bar' }, props);
    const { saveAudioInputEnabled, saveVideoInputEnabled, saveAudioInputDeviceId, saveVideoInputDeviceId } = usePersistentUserChoices({
        preventSave: !saveUserChoices
    });
    const microphoneOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveAudioInputEnabled(enabled) : null), [saveAudioInputEnabled]);
    const cameraOnChange = React.useCallback((enabled, isUserInitiated) => (isUserInitiated ? saveVideoInputEnabled(enabled) : null), [saveVideoInputEnabled]);
    return (_jsxs("div", Object.assign({}, htmlProps, { children: [visibleControls.microphone && (_jsxs("div", Object.assign({ className: "lk-button-group" }, { children: [_jsx(_Fragment, { children: _jsx(TrackToggle, Object.assign({ source: Track.Source.Microphone, showIcon: showIcon, onChange: microphoneOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: Track.Source.Microphone, error }) }, { children: showText && 'Microphone' })) }), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { kind: "audioinput", onActiveDeviceChange: (_kind, deviceId) => saveAudioInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.camera && (_jsxs("div", Object.assign({ className: "lk-button-group" }, { children: [_jsx(_Fragment, { children: _jsx(TrackToggle, Object.assign({ source: Track.Source.Camera, showIcon: showIcon, onChange: cameraOnChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: Track.Source.Camera, error }) }, { children: showText && 'Camera' })) }), _jsx("div", Object.assign({ className: "lk-button-group-menu" }, { children: _jsx(MediaDeviceMenu, { kind: "videoinput", onActiveDeviceChange: (_kind, deviceId) => saveVideoInputDeviceId(deviceId !== null && deviceId !== void 0 ? deviceId : '') }) }))] }))), visibleControls.screenShare && browserSupportsScreenSharing && (_jsx(_Fragment, { children: _jsx(TrackToggle, Object.assign({ source: Track.Source.ScreenShare, captureOptions: { audio: true, selfBrowserSurface: 'include' }, showIcon: showIcon, onChange: onScreenShareChange, onDeviceError: (error) => onDeviceError === null || onDeviceError === void 0 ? void 0 : onDeviceError({ source: Track.Source.ScreenShare, error }) }, { children: showText && (isScreenShareEnabled ? 'Stop screen share' : 'Share screen') })) })), visibleControls.chat && (_jsx(_Fragment, { children: _jsxs(ChatToggle, { children: [showIcon && _jsx(ChatIcon, {}), showText && 'Chat'] }) })), visibleControls.settings && (_jsx(_Fragment, { children: _jsxs(SettingsMenuToggle, { children: [showIcon && _jsx(GearIcon, {}), showText && 'Settings'] }) })), visibleControls.leave && (_jsx(_Fragment, { children: _jsxs(DisconnectButton, { children: [showIcon && _jsx(LeaveIcon, {}), showText && 'Leave'] }) })), _jsx(StartMediaButton, {})] })));
}
