'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: all[name]
    });
}
_export(exports, {
    useToolbarArrowNavigationProps_unstable: function() {
        return useToolbarArrowNavigationProps_unstable;
    },
    useToolbarBase_unstable: function() {
        return useToolbarBase_unstable;
    },
    useToolbar_unstable: function() {
        return useToolbar_unstable;
    }
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reacttabster = require("@fluentui/react-tabster");
const useToolbar_unstable = (props, ref)=>{
    const { size = 'medium' } = props;
    const state = useToolbarBase_unstable(props, ref);
    const arrowNavigationProps = useToolbarArrowNavigationProps_unstable();
    return {
        size,
        ...state,
        root: {
            ...state.root,
            ...arrowNavigationProps
        }
    };
};
const useToolbarBase_unstable = (props, ref)=>{
    const { vertical = false } = props;
    const initialState = {
        vertical,
        // TODO add appropriate props/defaults
        components: {
            // TODO add each slot's element type or component
            root: 'div'
        },
        // TODO add appropriate slots, for example:
        // mySlot: resolveShorthand(props.mySlot),
        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
            role: 'toolbar',
            ref: ref,
            ...vertical && {
                'aria-orientation': 'vertical'
            },
            ...props
        }), {
            elementType: 'div'
        })
    };
    const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
        checkedValues: props.checkedValues,
        defaultCheckedValues: props.defaultCheckedValues,
        onCheckedValueChange: props.onCheckedValueChange
    });
    const handleToggleButton = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
        if (name && value) {
            const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
            const newCheckedItems = [
                ...checkedItems
            ];
            if (checked) {
                newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
            } else {
                newCheckedItems.push(value);
            }
            onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
                name,
                checkedItems: newCheckedItems
            });
        }
    });
    const handleRadio = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
        if (name && value) {
            onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
                name,
                checkedItems: [
                    value
                ]
            });
        }
    });
    return {
        ...initialState,
        handleToggleButton,
        handleRadio,
        checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
    };
};
/**
 * Adds appropriate state values and handlers for selectable items
 * i.e checkboxes and radios
 */ const useToolbarSelectableState = (state)=>{
    const [checkedValues, setCheckedValues] = (0, _reactutilities.useControllableState)({
        state: state.checkedValues,
        defaultState: state.defaultCheckedValues,
        initialState: {}
    });
    const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;
    const onCheckedValueChange = (0, _reactutilities.useEventCallback)((e, { name, checkedItems })=>{
        if (onCheckedValueChangeOriginal) {
            onCheckedValueChangeOriginal(e, {
                name,
                checkedItems
            });
        }
        setCheckedValues((s)=>{
            return s ? {
                ...s,
                [name]: checkedItems
            } : {
                [name]: checkedItems
            };
        });
    });
    return [
        checkedValues,
        onCheckedValueChange
    ];
};
const useToolbarArrowNavigationProps_unstable = ()=>{
    return (0, _reacttabster.useArrowNavigationGroup)({
        circular: true,
        axis: 'both'
    });
};