define(["require", "exports", "tslib", "react", "@uifabric/react-cards", "office-ui-fabric-react"], function (require, exports, tslib_1, React, react_cards_1, office_ui_fabric_react_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var CardConfigureExample = /** @class */ (function (_super) {
        tslib_1.__extends(CardConfigureExample, _super);
        function CardConfigureExample(props) {
            var _this = _super.call(this, props) || this;
            _this._onCardChildrenGapChange = function (value) {
                _this.setState({ cardChildrenGap: value });
            };
            _this._onCardChildrenMarginChange = function (value) {
                _this.setState({ cardChildrenMargin: value });
            };
            _this._onCardChildrenPaddingChange = function (value) {
                _this.setState({ cardChildrenPadding: value });
            };
            _this._onCardItemHeightChange = function (value) {
                _this.setState({ cardItemHeight: value });
            };
            _this._onCardWidthChange = function (value) {
                _this.setState({ width: value });
            };
            _this._onDebugModeChange = function (ev, isChecked) {
                _this.setState({ debugMode: isChecked });
            };
            _this._onFilledSectionChange = function (ev, option) {
                _this.setState({ filledSection: option.key });
            };
            _this._onFirstCardSectionHeightChange = function (value) {
                _this.setState({ firstCardSectionHeight: value });
            };
            _this._onSecondCardSectionHeightChange = function (value) {
                _this.setState({ secondCardSectionHeight: value });
            };
            _this._onSpecificChildrenGapChange = function (value) {
                _this.setState({ specificChildrenGap: value });
            };
            _this._onSpecificChildrenGapAllowedChange = function (ev, isChecked) {
                _this.setState({ specificChildrenGapAllowed: isChecked });
            };
            _this.state = {
                cardChildrenGap: 20,
                cardChildrenMargin: 6,
                cardChildrenPadding: 6,
                cardItemHeight: 30,
                debugMode: true,
                filledSection: '0',
                firstCardSectionHeight: 115,
                secondCardSectionHeight: 115,
                specificChildrenGap: 20,
                specificChildrenGapAllowed: false,
                width: 212,
            };
            return _this;
        }
        CardConfigureExample.prototype.render = function () {
            var _a = this.state, cardChildrenGap = _a.cardChildrenGap, cardChildrenMargin = _a.cardChildrenMargin, cardChildrenPadding = _a.cardChildrenPadding, cardItemHeight = _a.cardItemHeight, debugMode = _a.debugMode, filledSection = _a.filledSection, firstCardSectionHeight = _a.firstCardSectionHeight, secondCardSectionHeight = _a.secondCardSectionHeight, specificChildrenGap = _a.specificChildrenGap, specificChildrenGapAllowed = _a.specificChildrenGapAllowed, width = _a.width;
            // Style definitions
            var cardStyles = {
                root: {
                    backgroundColor: debugMode ? '#D8F6FF' : 'transparent',
                },
            };
            var cardSectionOrItemStyles = {
                root: {
                    borderStyle: 'dashed',
                    borderWidth: '2px',
                },
            };
            var firstCardSectionStyles = {
                root: tslib_1.__assign({ backgroundColor: debugMode ? '#B0DEFF' : 'transparent', borderColor: debugMode ? '#2566CA' : 'transparent', minHeight: firstCardSectionHeight }, cardSectionOrItemStyles.root),
            };
            var cardItemStyles = {
                root: tslib_1.__assign({ backgroundColor: debugMode ? '#ABFFEF' : 'transparent', borderColor: debugMode ? '#0F7A67' : 'transparent', minHeight: cardItemHeight }, cardSectionOrItemStyles.root),
            };
            var secondCardSectionStyles = {
                root: tslib_1.__assign({ backgroundColor: debugMode ? '#E8D4FF' : 'transparent', borderColor: debugMode ? '#7742B3' : 'transparent', minHeight: secondCardSectionHeight }, cardSectionOrItemStyles.root),
            };
            var resolvedGap = specificChildrenGapAllowed ? specificChildrenGap : cardChildrenGap;
            // Token definitions
            var containerStackTokens = { childrenGap: 30 };
            var lastConfigOptionsStackTokens = { childrenGap: 8 };
            var cardTokens = {
                childrenGap: cardChildrenGap,
                childrenMargin: cardChildrenMargin,
                maxWidth: 400,
                minWidth: 212,
                width: width,
            };
            var cardSectionTokens = {
                childrenGap: resolvedGap,
                padding: cardChildrenPadding,
            };
            var cardItemTokens = { padding: cardChildrenPadding };
            var debugCardTokens = {
                boxShadow: 'none',
                childrenGap: 0,
                minWidth: 0,
            };
            // Debug card esction definition
            var DebugCardSection = function (props) {
                var height = props.height, text = props.text;
                var debugCardSectionStyles = {
                    root: {
                        fontSize: 9,
                        fontWeight: 400,
                        height: height,
                    },
                };
                var debugHeading = {
                    root: {
                        paddingLeft: 8,
                    },
                };
                var debugCardSectionTokens = {
                    childrenGap: 2,
                    margin: "0px 6px",
                };
                return (React.createElement(react_cards_1.Card.Section, { fill: true, horizontal: true, verticalAlign: "center", styles: debugCardSectionStyles, tokens: debugCardSectionTokens }, height >= 20 && (React.createElement(React.Fragment, null,
                    React.createElement(office_ui_fabric_react_1.Icon, { iconName: "ChevronLeft" }),
                    React.createElement(office_ui_fabric_react_1.Icon, { iconName: "Remove" }),
                    React.createElement(office_ui_fabric_react_1.Icon, { iconName: "Remove" }),
                    React.createElement(office_ui_fabric_react_1.Icon, { iconName: "Remove" }),
                    React.createElement(office_ui_fabric_react_1.Text, { variant: "xSmall", styles: debugHeading }, text)))));
            };
            return (React.createElement(office_ui_fabric_react_1.Stack, { tokens: containerStackTokens },
                React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, verticalAlign: "center" },
                    React.createElement(office_ui_fabric_react_1.Stack.Item, { grow: true },
                        React.createElement(office_ui_fabric_react_1.Stack, null,
                            React.createElement(office_ui_fabric_react_1.Slider, { label: "First card section height:", min: 75, max: 230, step: 1, defaultValue: 115, showValue: true, onChange: this._onFirstCardSectionHeightChange }),
                            React.createElement(office_ui_fabric_react_1.Slider, { label: "Card item height:", min: 30, max: 60, step: 1, defaultValue: 30, showValue: true, onChange: this._onCardItemHeightChange }),
                            React.createElement(office_ui_fabric_react_1.Slider, { label: "Second card section height:", min: 75, max: 230, step: 1, defaultValue: 115, showValue: true, onChange: this._onSecondCardSectionHeightChange }))),
                    React.createElement(office_ui_fabric_react_1.Stack.Item, { grow: true },
                        React.createElement(office_ui_fabric_react_1.Stack, null,
                            React.createElement(office_ui_fabric_react_1.Slider, { label: "Card width:", min: 212, max: 400, step: 1, defaultValue: 212, showValue: true, onChange: this._onCardWidthChange }),
                            React.createElement(office_ui_fabric_react_1.Slider, { label: "Card children gap:", min: 0, max: 40, step: 1, defaultValue: 20, showValue: true, onChange: this._onCardChildrenGapChange }),
                            React.createElement(office_ui_fabric_react_1.Slider, { label: "Card children margin:", min: 0, max: 15, step: 1, defaultValue: 6, showValue: true, onChange: this._onCardChildrenMarginChange }))),
                    React.createElement(office_ui_fabric_react_1.Stack.Item, { grow: true },
                        React.createElement(office_ui_fabric_react_1.Stack, { tokens: lastConfigOptionsStackTokens },
                            React.createElement(office_ui_fabric_react_1.Slider, { label: "Card children padding:", min: 0, max: 15, step: 1, defaultValue: 6, showValue: true, onChange: this._onCardChildrenPaddingChange }),
                            React.createElement(office_ui_fabric_react_1.Slider, { label: "Specific children gap in card sections:", min: 0, max: 40, step: 1, defaultValue: 20, showValue: true, onChange: this._onSpecificChildrenGapChange, disabled: !specificChildrenGapAllowed }),
                            React.createElement(office_ui_fabric_react_1.Stack.Item, { align: "center" },
                                React.createElement(office_ui_fabric_react_1.Checkbox, { label: "Allow specific children gap in card sections", defaultChecked: false, onChange: this._onSpecificChildrenGapAllowedChange })))),
                    React.createElement(office_ui_fabric_react_1.Stack.Item, null,
                        React.createElement(office_ui_fabric_react_1.Stack, { horizontalAlign: "space-evenly", verticalAlign: "space-evenly", tokens: lastConfigOptionsStackTokens },
                            React.createElement(office_ui_fabric_react_1.Checkbox, { label: "Toggle debug mode", defaultChecked: true, onChange: this._onDebugModeChange }),
                            React.createElement(office_ui_fabric_react_1.Dropdown, { selectedKey: filledSection, placeholder: "Select section that fills margins:", label: "Section that fills margins:", options: [
                                    { key: '0', text: 'None' },
                                    { key: '1', text: 'First card section' },
                                    { key: '2', text: 'Card item' },
                                    { key: '3', text: 'Second card section' },
                                ], onChange: this._onFilledSectionChange })))),
                React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true },
                    React.createElement(react_cards_1.Card, { "aria-label": "Configurable card", styles: cardStyles, tokens: cardTokens },
                        React.createElement(react_cards_1.Card.Section, { fill: filledSection === '1', styles: firstCardSectionStyles, tokens: cardSectionTokens },
                            React.createElement(office_ui_fabric_react_1.Text, null, "This is a Card Section"),
                            React.createElement(office_ui_fabric_react_1.Text, null, "This is a Card Section"),
                            React.createElement(office_ui_fabric_react_1.Text, null, "This is a Card Section")),
                        React.createElement(react_cards_1.Card.Item, { fill: filledSection === '2', styles: cardItemStyles, tokens: cardItemTokens },
                            React.createElement(office_ui_fabric_react_1.Text, null, "This is a Card Item")),
                        React.createElement(react_cards_1.Card.Section, { fill: filledSection === '3', styles: secondCardSectionStyles, tokens: cardSectionTokens },
                            React.createElement(office_ui_fabric_react_1.Text, null, "This is a Card Section"),
                            React.createElement(office_ui_fabric_react_1.Text, null, "This is a Card Section"),
                            React.createElement(office_ui_fabric_react_1.Text, null, "This is a Card Section"))),
                    debugMode && (React.createElement(react_cards_1.Card, { root: { verticalAlign: 'center' }, tokens: debugCardTokens },
                        DebugCardSection({
                            height: (firstCardSectionHeight < 75 + 2 * resolvedGap ? 75 + 2 * resolvedGap : firstCardSectionHeight) -
                                (filledSection === '1' ? cardChildrenMargin : 0),
                            text: 'Card Section',
                        }),
                        DebugCardSection({ height: cardChildrenGap, text: 'Gap' }),
                        DebugCardSection({ height: cardItemHeight + 2 * cardChildrenPadding + 4, text: 'Card Item' }),
                        DebugCardSection({ height: cardChildrenGap, text: 'Gap' }),
                        DebugCardSection({
                            height: (secondCardSectionHeight < 75 + 2 * resolvedGap ? 75 + 2 * resolvedGap : secondCardSectionHeight) -
                                (filledSection === '3' ? cardChildrenMargin : 0),
                            text: 'Card Section',
                        }))))));
        };
        return CardConfigureExample;
    }(React.Component));
    exports.CardConfigureExample = CardConfigureExample;
});
//# sourceMappingURL=Card.Configure.Example.js.map