// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { FocusZone, Label, mergeStyles, Stack } from '@fluentui/react';
import { useId, useWarnings } from '@fluentui/react-hooks';
import React from 'react';
import { chunk } from '../utils';
import { _VideoEffectsItem } from './VideoEffectsItem';
import { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';
/**
 * Picker for choosing a Video Background Effect.
 *
 * @remarks
 * This functions similar to a radio group of buttons, where the user can select one of the options.
 *
 * @internal
 */
export const _VideoBackgroundEffectsPicker = (props) => {
    var _a, _b, _c, _d, _e;
    const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState(props.defaultSelectedEffectKey);
    // Warn the developer if they use the component in an incorrect controlled way.
    useWarnings({
        name: 'VideoBackgroundEffectsPicker',
        props,
        controlledUsage: {
            onChangeProp: 'onChange',
            valueProp: 'selectedEffectKey',
            defaultValueProp: 'defaultSelectedEffectKey'
        }
    });
    const selectedEffect = (_a = props.selectedEffectKey) !== null && _a !== void 0 ? _a : componentControlledSelectedEffectKey;
    const setSelectedEffect = (selectedEffectKey) => {
        var _a;
        setComponentControlledSelectedEffectKey(selectedEffectKey);
        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, selectedEffectKey);
    };
    const convertedOptions = props.options.map(option => (Object.assign({ isSelected: option.itemKey === selectedEffect, onSelect: () => setSelectedEffect(option.itemKey) }, option)));
    const itemsPerRow = (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3;
    const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);
    // If the final row is not full, fill it with hidden items to ensure layout.
    const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - ((_d = (_c = optionsByRow[optionsByRow.length - 1]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0);
    const effectsLabelId = useId('effects-radio-label');
    return React.createElement(FocusZone, null,
        React.createElement(Stack, { tokens: {
                childrenGap: '0.5rem'
            }, role: "radiogroup", "aria-labelledby": effectsLabelId },
            React.createElement(Label, { id: effectsLabelId, className: mergeStyles((_e = props.styles) === null || _e === void 0 ? void 0 : _e.label) }, props.label),
            optionsByRow.map((options, rowIndex) => {
                var _a;
                return React.createElement(Stack, { className: mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: {
                        childrenGap: '0.5rem'
                    }, "data-ui-id": "video-effects-picker-row" },
                    options.map((option, i) => {
                        if (i === 0 && rowIndex === 0) {
                            return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, componentRef: props.componentRef }));
                        }
                        return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey }));
                    }),
                    fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({
                        length: fillCount
                    }).map((_, index) => React.createElement(Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })));
            })));
};
//# sourceMappingURL=VideoBackgroundEffectsPicker.js.map