define(["require", "exports", "react", "@fluentui/react-button", "@fluentui/react-utilities", "../Button/Button.stories", "../Playground"], function (require, exports, React, react_button_1, react_utilities_1, Button_stories_1, Playground_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.ToggleButtonPlayground = void 0;
    var ToggleButtonPlayground = function () {
        var _a = react_utilities_1.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: Button_stories_1.buttonBaseProps },
            { sectionName: 'ToggleButton props', propList: toggleButtonBaseProps },
        ];
        var onClick = React.useCallback(function () {
            toggleChecked();
        }, [toggleChecked]);
        return (React.createElement(Playground_1.Playground, { sections: toggleButtonProps },
            React.createElement(react_button_1.ToggleButton, { onClick: onClick })));
    };
    exports.ToggleButtonPlayground = ToggleButtonPlayground;
});
//# sourceMappingURL=ToggleButton.stories.js.map