// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import React from 'react';
import { useCallback, useMemo } from 'react';
import { MessageBar, MessageBarType, Stack, mergeStyles } from '@fluentui/react';
import { useLocale } from '../localization';
import { _VideoBackgroundEffectsPicker } from "../../../../react-components/src";
import { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';
import { useSelector } from '../CallComposite/hooks/useSelector';
import { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';
import { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';
/**
 * Pane that is used to show video effects button
 * @private
 */
/** @beta */
export const VideoEffectsPaneContent = (props) => {
    var _a;
    const { onDismissError, activeVideoEffectError, activeVideoEffectChange } = props;
    const locale = useLocale();
    const adapter = useAdapter();
    const strings = locale.strings.call;
    const activeVideoEffects = (_a = useSelector(localVideoSelector).activeVideoEffects) === null || _a === void 0 ? void 0 : _a.activeEffects;
    const selectableVideoEffects = useMemo(() => {
        const videoEffects = [{
                itemKey: 'none',
                iconProps: {
                    iconName: 'RemoveVideoBackgroundEffect'
                },
                title: strings.removeBackgroundEffectButtonLabel,
                tooltipProps: {
                    content: strings.removeBackgroundTooltip
                }
            }, {
                itemKey: 'blur',
                iconProps: {
                    iconName: 'BlurVideoBackground'
                },
                title: strings.blurBackgroundEffectButtonLabel,
                tooltipProps: {
                    content: strings.blurBackgroundTooltip
                }
            }];
        if (props.backgroundImages) {
            props.backgroundImages.forEach((img) => {
                var _a;
                videoEffects.push({
                    itemKey: img.key,
                    backgroundProps: {
                        url: img.url
                    },
                    tooltipProps: {
                        content: (_a = img.tooltipText) !== null && _a !== void 0 ? _a : ''
                    }
                });
            });
        }
        return videoEffects;
    }, [strings.removeBackgroundEffectButtonLabel, strings.removeBackgroundTooltip, strings.blurBackgroundEffectButtonLabel, strings.blurBackgroundTooltip, props.backgroundImages]);
    const onEffectChange = useCallback((effectKey) => __awaiter(void 0, void 0, void 0, function* () {
        if (effectKey === 'blur') {
            const blurEffect = {
                effectName: effectKey
            };
            activeVideoEffectChange({
                type: 'blur',
                timestamp: new Date(Date.now())
            });
            yield adapter.startVideoBackgroundEffect(blurEffect);
            adapter.updateSelectedVideoBackgroundEffect(blurEffect);
        }
        else if (effectKey === 'none') {
            const noneEffect = {
                effectName: effectKey
            };
            yield adapter.stopVideoBackgroundEffects();
            adapter.updateSelectedVideoBackgroundEffect(noneEffect);
        }
        else {
            const backgroundImg = selectableVideoEffects.find(effect => {
                return effect.itemKey === effectKey;
            });
            if (backgroundImg && backgroundImg.backgroundProps) {
                const replaceEffect = {
                    effectName: 'replacement',
                    key: effectKey,
                    backgroundImageUrl: backgroundImg.backgroundProps.url
                };
                activeVideoEffectChange({
                    type: 'replacement',
                    timestamp: new Date(Date.now())
                });
                yield adapter.startVideoBackgroundEffect(replaceEffect);
                adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
            }
        }
    }), [adapter, activeVideoEffectChange, selectableVideoEffects]);
    if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {
        const noneEffect = {
            effectName: 'none'
        };
        adapter.updateSelectedVideoBackgroundEffect(noneEffect);
    }
    return VideoEffectsPaneTrampoline(onDismissError, props.updateFocusHandle, activeVideoEffectError, selectableVideoEffects, onEffectChange);
};
const VideoEffectsPaneTrampoline = (onDismissError, updateFocusHandle, activeVideoEffectError, selectableVideoEffects, onEffectChange) => {
    const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);
    const isCameraOn = useSelector(localVideoSelector).isAvailable;
    const showWarning = !isCameraOn && selectedEffect !== 'none';
    const locale = useLocale();
    return React.createElement(Stack, { tokens: {
            childrenGap: '0.75rem'
        }, className: mergeStyles({
            paddingLeft: '0.5rem'
        }) },
        activeVideoEffectError && isCameraOn && React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError), role: "alert", "aria-live": "assertive" }, locale.strings.call.unableToStartVideoEffect),
        showWarning && React.createElement(MessageBar, { messageBarType: MessageBarType.warning, role: "alert", "aria-live": "assertive" }, locale.strings.call.cameraOffBackgroundEffectWarningText),
        React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect, componentRef: updateFocusHandle }));
};
const backgroundPickerStyles = {
    label: {
        fontSize: '0.75rem',
        lineHeight: '0.5rem',
        fontWeight: '400'
    }
};
//# sourceMappingURL=VideoEffectsPane.js.map