import * as React from 'react';
import { ToggleButton } from '@fluentui/react-button';
import { useBoolean } from '@fluentui/react-utilities';
import { buttonBaseProps } from '../Button/Button.stories';
import { Playground } from '../Playground';
export var ToggleButtonPlayground = function () {
    var _a = useBoolean(false), checked = _a[0], _b = _a[1], setTrueChecked = _b.setTrue, setFalseChecked = _b.setFalse, toggleChecked = _b.toggle;
    var setChecked = React.useCallback(function (checkedValue) {
        checkedValue ? setTrueChecked() : setFalseChecked();
    }, [setTrueChecked, setFalseChecked]);
    var toggleButtonBaseProps = React.useMemo(function () { return [
        {
            propName: 'checked',
            propType: 'boolean',
            defaultValue: checked,
            setDefaultValue: setChecked,
            dependsOnProps: ['~disabled'],
        },
    ]; }, [checked, setChecked]);
    var toggleButtonProps = [
        { sectionName: 'Button props', propList: buttonBaseProps },
        { sectionName: 'ToggleButton props', propList: toggleButtonBaseProps },
    ];
    var onClick = React.useCallback(function () {
        toggleChecked();
    }, [toggleChecked]);
    return (React.createElement(Playground, { sections: toggleButtonProps },
        React.createElement(ToggleButton, { onClick: onClick })));
};
//# sourceMappingURL=ToggleButton.stories.js.map