"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VerticalStackConfigureExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var Checkbox_1 = require("@fluentui/react/lib-commonjs/Checkbox");
var Dropdown_1 = require("@fluentui/react/lib-commonjs/Dropdown");
var Slider_1 = require("@fluentui/react/lib-commonjs/Slider");
var Stack_1 = require("@fluentui/react/lib-commonjs/Stack");
var Styling_1 = require("@fluentui/react/lib-commonjs/Styling");
var TextField_1 = require("@fluentui/react/lib-commonjs/TextField");
var react_hooks_1 = require("@fluentui/react-hooks");
var example_data_1 = require("@fluentui/example-data");
var checkboxStyles = { root: { marginRight: 10 } };
// Alignment options
var verticalAlignmentOptions = [
    { key: 'start', text: 'Top' },
    { key: 'center', text: 'Center' },
    { key: 'end', text: 'Bottom' },
    { key: 'space-around', text: 'Space around' },
    { key: 'space-between', text: 'Space between' },
    { key: 'space-evenly', text: 'Space evenly' },
];
var horizontalAlignmentOptions = [
    { key: 'start', text: 'Left' },
    { key: 'center', text: 'Center' },
    { key: 'end', text: 'Right' },
];
// Non-mutating tokens definition
var sectionStackTokens = { childrenGap: 10 };
var configureStackTokens = { childrenGap: 20 };
var VerticalStackConfigureExampleContent = function (props) {
    var numItems = props.numItems, showBoxShadow = props.showBoxShadow, preventOverflow = props.preventOverflow, disableShrink = props.disableShrink, wrap = props.wrap, stackHeight = props.stackHeight, autoHeight = props.autoHeight, childrenGap = props.childrenGap, paddingLeft = props.paddingLeft, paddingRight = props.paddingRight, paddingTop = props.paddingTop, paddingBottom = props.paddingBottom, verticalAlignment = props.verticalAlignment, horizontalAlignment = props.horizontalAlignment, hideEmptyChildren = props.hideEmptyChildren, emptyChildren = props.emptyChildren;
    // Styles definition
    var stackStyles = {
        root: [
            {
                background: Styling_1.DefaultPalette.themeTertiary,
                height: autoHeight ? 'auto' : stackHeight,
                marginLeft: 10,
                marginRight: 10,
            },
            preventOverflow && {
                overflow: 'hidden',
            },
        ],
    };
    var stackItemStyles = {
        root: {
            alignItems: 'center',
            background: Styling_1.DefaultPalette.themePrimary,
            boxShadow: showBoxShadow ? "0px 0px 10px 5px " + Styling_1.DefaultPalette.themeDarker : '',
            color: Styling_1.DefaultPalette.white,
            display: 'flex',
            height: 50,
            justifyContent: 'center',
            width: 50,
        },
    };
    // Tokens definition
    var exampleStackTokens = {
        childrenGap: childrenGap + ' ' + 0,
        padding: paddingTop + "px " + paddingRight + "px " + paddingBottom + "px " + paddingLeft + "px",
    };
    return (React.createElement(Stack_1.Stack, { disableShrink: disableShrink, wrap: wrap, verticalAlign: verticalAlignment, horizontalAlign: horizontalAlignment, styles: stackStyles, tokens: exampleStackTokens }, example_data_1.range(1, numItems).map(function (value, index) {
        if (emptyChildren.indexOf(value.toString()) !== -1) {
            return hideEmptyChildren ? (React.createElement(Stack_1.Stack.Item, { key: index, styles: stackItemStyles })) : (React.createElement("span", { key: index, className: Styling_1.mergeStyles(stackItemStyles.root) }));
        }
        return (React.createElement("span", { key: index, className: Styling_1.mergeStyles(stackItemStyles.root) }, value));
    })));
};
var VerticalStackConfigureExample = function () {
    var _a = React.useState(5), numItems = _a[0], setNumItems = _a[1];
    var _b = react_hooks_1.useBoolean(false), showBoxShadow = _b[0], toggleShowBoxShadow = _b[1].toggle;
    var _c = react_hooks_1.useBoolean(false), preventOverflow = _c[0], togglePreventOverflow = _c[1].toggle;
    var _d = react_hooks_1.useBoolean(false), wrap = _d[0], toggleWrap = _d[1].toggle;
    var _e = react_hooks_1.useBoolean(true), disableShrink = _e[0], toggleDisableShrink = _e[1].toggle;
    var _f = React.useState(200), stackHeight = _f[0], setStackHeight = _f[1];
    var _g = react_hooks_1.useBoolean(true), autoHeight = _g[0], toggleAutoHeight = _g[1].toggle;
    var _h = React.useState(0), childrenGap = _h[0], setChildrenGap = _h[1];
    var _j = React.useState(0), paddingLeft = _j[0], setPaddingLeft = _j[1];
    var _k = React.useState(0), paddingRight = _k[0], setPaddingRight = _k[1];
    var _l = React.useState(0), paddingTop = _l[0], setPaddingTop = _l[1];
    var _m = React.useState(0), paddingBottom = _m[0], setPaddingBottom = _m[1];
    var _o = React.useState('start'), horizontalAlignment = _o[0], setHorizontalAlignment = _o[1];
    var _p = React.useState('start'), verticalAlignment = _p[0], setVerticalAlignment = _p[1];
    var _q = react_hooks_1.useBoolean(false), hideEmptyChildren = _q[0], toggleHideEmptyChildren = _q[1].toggle;
    var _r = React.useState([]), emptyChildren = _r[0], setEmptyChildren = _r[1];
    return (React.createElement(Stack_1.Stack, { tokens: sectionStackTokens },
        React.createElement(Stack_1.Stack, { horizontal: true, tokens: configureStackTokens },
            React.createElement(Stack_1.Stack.Item, { grow: true },
                React.createElement(Stack_1.Stack, null,
                    React.createElement(Slider_1.Slider, { label: "Number of items:", min: 1, max: 10, step: 1, defaultValue: 5, onChange: setNumItems }),
                    React.createElement(Stack_1.Stack, { horizontal: true },
                        React.createElement(Checkbox_1.Checkbox, { label: "Shadow around items", onChange: toggleShowBoxShadow, styles: checkboxStyles }),
                        React.createElement(Checkbox_1.Checkbox, { label: "Prevent item overflow", onChange: togglePreventOverflow, styles: checkboxStyles }),
                        React.createElement(Checkbox_1.Checkbox, { label: "Shrink items", onChange: toggleDisableShrink, styles: checkboxStyles }),
                        React.createElement(Checkbox_1.Checkbox, { label: "Wrap items", onChange: toggleWrap })))),
            React.createElement(Stack_1.Stack.Item, { grow: true },
                React.createElement(Stack_1.Stack, null,
                    React.createElement(Slider_1.Slider, { label: "Container height:", min: 1, max: 400, step: 1, defaultValue: 200, showValue: true, onChange: setStackHeight, disabled: autoHeight }),
                    React.createElement(Checkbox_1.Checkbox, { label: "Automatic height (based on items)", defaultChecked: true, onChange: toggleAutoHeight })))),
        React.createElement(Stack_1.Stack, { horizontal: true, tokens: configureStackTokens },
            React.createElement(Stack_1.Stack.Item, { grow: true },
                React.createElement(Stack_1.Stack, null,
                    React.createElement(Slider_1.Slider, { label: "Vertical gap between items:", min: 0, max: 50, step: 1, defaultValue: 0, showValue: true, onChange: setChildrenGap }),
                    React.createElement(Stack_1.Stack, { horizontal: true, verticalAlign: "end", tokens: configureStackTokens },
                        React.createElement(Stack_1.Stack.Item, { grow: true },
                            React.createElement(Dropdown_1.Dropdown, { selectedKey: verticalAlignment, placeholder: "Select Vertical Alignment", label: "Vertical alignment:", options: verticalAlignmentOptions, 
                                // eslint-disable-next-line react/jsx-no-bind
                                onChange: function (ev, option) {
                                    return setVerticalAlignment(option.key);
                                } })),
                        React.createElement(Stack_1.Stack.Item, { grow: true },
                            React.createElement(Dropdown_1.Dropdown, { selectedKey: horizontalAlignment, placeholder: "Select Horizontal Alignment", label: "Horizontal alignment:", options: horizontalAlignmentOptions, 
                                // eslint-disable-next-line react/jsx-no-bind
                                onChange: function (ev, option) {
                                    return setHorizontalAlignment(option.key);
                                } })),
                        React.createElement(Stack_1.Stack.Item, null,
                            React.createElement(Checkbox_1.Checkbox, { label: "Hide empty children", onChange: toggleHideEmptyChildren })),
                        React.createElement(Stack_1.Stack.Item, { grow: true },
                            React.createElement(TextField_1.TextField, { label: "List of empty children (e.g. 1 2 3):", 
                                // eslint-disable-next-line react/jsx-no-bind
                                onChange: function (ev, value) {
                                    if (value === undefined) {
                                        return;
                                    }
                                    setEmptyChildren(value.replace(/,/g, '').split(' '));
                                } }))))),
            React.createElement(Stack_1.Stack.Item, { grow: true },
                React.createElement(Stack_1.Stack, null,
                    React.createElement(Slider_1.Slider, { label: "Left padding:", min: 0, max: 50, step: 1, defaultValue: 0, showValue: true, onChange: setPaddingLeft }),
                    React.createElement(Slider_1.Slider, { label: "Right padding:", min: 0, max: 50, step: 1, defaultValue: 0, showValue: true, onChange: setPaddingRight }))),
            React.createElement(Stack_1.Stack.Item, { grow: true },
                React.createElement(Stack_1.Stack, null,
                    React.createElement(Slider_1.Slider, { label: "Top padding:", min: 0, max: 50, step: 1, defaultValue: 0, showValue: true, onChange: setPaddingTop }),
                    React.createElement(Slider_1.Slider, { label: "Bottom padding:", min: 0, max: 50, step: 1, defaultValue: 0, showValue: true, onChange: setPaddingBottom })))),
        React.createElement(VerticalStackConfigureExampleContent, tslib_1.__assign({}, {
            numItems: numItems,
            showBoxShadow: showBoxShadow,
            preventOverflow: preventOverflow,
            disableShrink: disableShrink,
            wrap: wrap,
            stackHeight: stackHeight,
            autoHeight: autoHeight,
            childrenGap: childrenGap,
            paddingLeft: paddingLeft,
            paddingRight: paddingRight,
            paddingTop: paddingTop,
            paddingBottom: paddingBottom,
            verticalAlignment: verticalAlignment,
            horizontalAlignment: horizontalAlignment,
            hideEmptyChildren: hideEmptyChildren,
            emptyChildren: emptyChildren,
        }))));
};
exports.VerticalStackConfigureExample = VerticalStackConfigureExample;
//# sourceMappingURL=Stack.Vertical.Configure.Example.js.map