"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HorizontalStackConfigureExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("@fluentui/react");
var react_hooks_1 = require("@fluentui/react-hooks");
var example_data_1 = require("@fluentui/example-data");
// Alignment options
var horizontalAlignmentOptions = [
    { key: 'start', text: 'Left' },
    { key: 'center', text: 'Center' },
    { key: 'end', text: 'Right' },
    { key: 'space-around', text: 'Space around' },
    { key: 'space-between', text: 'Space between' },
    { key: 'space-evenly', text: 'Space evenly' },
];
var verticalAlignmentOptions = [
    { key: 'start', text: 'Top' },
    { key: 'center', text: 'Center' },
    { key: 'end', text: 'Bottom' },
];
// Tokens definition
var sectionStackTokens = { childrenGap: 10 };
var configureStackTokens = { childrenGap: 20 };
var shadowItemCheckboxStyles = { root: { marginRight: 10 } };
var wrapItemCheckboxStyles = { root: { marginBottom: 10 } };
var HorizontalStackConfigureExampleContent = function (props) {
    var numItems = props.numItems, showBoxShadow = props.showBoxShadow, preventOverflow = props.preventOverflow, wrap = props.wrap, wrapperWidth = props.wrapperWidth, disableShrink = props.disableShrink, columnGap = props.columnGap, rowGap = props.rowGap, paddingLeft = props.paddingLeft, paddingRight = props.paddingRight, paddingTop = props.paddingTop, paddingBottom = props.paddingBottom, horizontalAlignment = props.horizontalAlignment, verticalAlignment = props.verticalAlignment, hideEmptyChildren = props.hideEmptyChildren, emptyChildren = props.emptyChildren;
    // Styles definition
    var stackStyles = {
        root: [
            {
                background: react_1.DefaultPalette.themeTertiary,
                marginLeft: 10,
                marginRight: 10,
                minHeight: 100,
                width: "calc(" + wrapperWidth + "% - 20px)",
            },
            preventOverflow && {
                overflow: 'hidden',
            },
        ],
        inner: {
            overflow: preventOverflow ? 'hidden' : 'visible',
        },
    };
    var stackItemStyles = {
        root: {
            alignItems: 'center',
            background: react_1.DefaultPalette.themePrimary,
            boxShadow: showBoxShadow ? "0px 0px 10px 5px " + react_1.DefaultPalette.themeDarker : '',
            color: react_1.DefaultPalette.white,
            display: 'flex',
            height: 50,
            justifyContent: 'center',
            width: 50,
        },
    };
    // Tokens definition
    var exampleStackTokens = {
        childrenGap: rowGap + ' ' + columnGap,
        padding: paddingTop + "px " + paddingRight + "px " + paddingBottom + "px " + paddingLeft + "px",
    };
    return (React.createElement(react_1.Stack, { horizontal: true, wrap: wrap, disableShrink: disableShrink, horizontalAlign: horizontalAlignment, verticalAlign: verticalAlignment, styles: stackStyles, tokens: exampleStackTokens }, example_data_1.range(1, numItems).map(function (value, index) {
        if (emptyChildren.indexOf(value.toString()) !== -1) {
            return hideEmptyChildren ? (React.createElement(react_1.Stack.Item, { key: index, styles: stackItemStyles })) : (React.createElement("span", { key: index, style: stackItemStyles.root }));
        }
        return (React.createElement("span", { key: index, style: stackItemStyles.root }, value));
    })));
};
var HorizontalStackConfigureExample = 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), wrap = _c[0], toggleWrap = _c[1].toggle;
    var _d = react_hooks_1.useBoolean(false), preventOverflow = _d[0], togglePreventOverflow = _d[1].toggle;
    var _e = react_hooks_1.useBoolean(true), disableShrink = _e[0], toggleDisableShrink = _e[1].toggle;
    var _f = React.useState(100), wrapperWidth = _f[0], setWrapperWidth = _f[1];
    var _g = React.useState(0), columnGap = _g[0], setColumnGap = _g[1];
    var _h = React.useState(0), rowGap = _h[0], setRowGap = _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(react_1.Stack, { tokens: sectionStackTokens },
        React.createElement(react_1.Stack, { horizontal: true, disableShrink: true },
            React.createElement(react_1.Stack.Item, { grow: true },
                React.createElement(react_1.Stack, null,
                    React.createElement(react_1.Slider, { label: "Number of items:", min: 1, max: 30, step: 1, defaultValue: 5, showValue: true, onChange: setNumItems }),
                    React.createElement(react_1.Stack, { horizontal: true, disableShrink: true },
                        React.createElement(react_1.Checkbox, { label: "Shadow around items", onChange: toggleShowBoxShadow, styles: shadowItemCheckboxStyles }),
                        React.createElement(react_1.Checkbox, { label: "Prevent item overflow", onChange: togglePreventOverflow })))),
            React.createElement(react_1.Stack.Item, { grow: true },
                React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, tokens: configureStackTokens },
                    React.createElement(react_1.Stack, null,
                        React.createElement(react_1.Checkbox, { label: "Wrap items", onChange: toggleWrap, styles: wrapItemCheckboxStyles }),
                        React.createElement(react_1.Checkbox, { label: "Shrink items", onChange: toggleDisableShrink })),
                    React.createElement(react_1.Stack.Item, { grow: true },
                        React.createElement(react_1.Slider, { label: "Container width:", min: 1, max: 100, step: 1, defaultValue: 100, showValue: true, onChange: setWrapperWidth }))))),
        React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, tokens: configureStackTokens },
            React.createElement(react_1.Stack.Item, { grow: true },
                React.createElement(react_1.Stack, null,
                    React.createElement(react_1.Slider, { label: "Horizontal gap between items:", min: 0, max: 50, step: 1, defaultValue: 0, showValue: true, onChange: setColumnGap }),
                    React.createElement(react_1.Slider, { label: "Vertical gap between items:", min: 0, max: 50, step: 1, defaultValue: 0, showValue: true, onChange: setRowGap }))),
            React.createElement(react_1.Stack.Item, { grow: true },
                React.createElement(react_1.Stack, null,
                    React.createElement(react_1.Slider, { label: "Left padding:", min: 0, max: 50, step: 1, defaultValue: 0, showValue: true, onChange: setPaddingLeft }),
                    React.createElement(react_1.Slider, { label: "Right padding:", min: 0, max: 50, step: 1, defaultValue: 0, showValue: true, onChange: setPaddingRight }))),
            React.createElement(react_1.Stack.Item, { grow: true },
                React.createElement(react_1.Stack, null,
                    React.createElement(react_1.Slider, { label: "Top padding:", min: 0, max: 50, step: 1, defaultValue: 0, showValue: true, onChange: setPaddingTop }),
                    React.createElement(react_1.Slider, { label: "Bottom padding:", min: 0, max: 50, step: 1, defaultValue: 0, showValue: true, onChange: setPaddingBottom })))),
        React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, verticalAlign: "end", tokens: configureStackTokens },
            React.createElement(react_1.Stack.Item, { grow: true },
                React.createElement(react_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(react_1.Stack.Item, { grow: true },
                React.createElement(react_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(react_1.Stack.Item, null,
                React.createElement(react_1.Checkbox, { label: "Hide empty children", onChange: toggleHideEmptyChildren })),
            React.createElement(react_1.Stack.Item, { grow: true },
                React.createElement(react_1.TextField, { label: "Enter a space-separated 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(HorizontalStackConfigureExampleContent, tslib_1.__assign({}, {
            numItems: numItems,
            showBoxShadow: showBoxShadow,
            preventOverflow: preventOverflow,
            wrap: wrap,
            wrapperWidth: wrapperWidth,
            disableShrink: disableShrink,
            columnGap: columnGap,
            rowGap: rowGap,
            paddingLeft: paddingLeft,
            paddingRight: paddingRight,
            paddingTop: paddingTop,
            paddingBottom: paddingBottom,
            horizontalAlignment: horizontalAlignment,
            verticalAlignment: verticalAlignment,
            hideEmptyChildren: hideEmptyChildren,
            emptyChildren: emptyChildren,
        }))));
};
exports.HorizontalStackConfigureExample = HorizontalStackConfigureExample;
//# sourceMappingURL=Stack.Horizontal.Configure.Example.js.map