"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const PropTypes = __importStar(require("prop-types"));
const classnames_1 = __importDefault(require("classnames"));
const FlexBlockItem_1 = require("./FlexBlockItem");
var FlexBlockDirectionProperty;
(function (FlexBlockDirectionProperty) {
    FlexBlockDirectionProperty["ROW"] = "row";
    FlexBlockDirectionProperty["COLUMN"] = "column";
})(FlexBlockDirectionProperty || (FlexBlockDirectionProperty = {}));
var FlexBlockAlignProperty;
(function (FlexBlockAlignProperty) {
    FlexBlockAlignProperty["CENTER"] = "center";
    FlexBlockAlignProperty["START"] = "start";
    FlexBlockAlignProperty["END"] = "end";
})(FlexBlockAlignProperty || (FlexBlockAlignProperty = {}));
var FlexBlockJustifyProperty;
(function (FlexBlockJustifyProperty) {
    FlexBlockJustifyProperty["CENTER"] = "center";
    FlexBlockJustifyProperty["START"] = "start";
    FlexBlockJustifyProperty["END"] = "end";
    FlexBlockJustifyProperty["SPACE_BETWEEN"] = "space-between";
    FlexBlockJustifyProperty["SPACE_AROUND"] = "space-around";
    FlexBlockJustifyProperty["SPACE_EVENLY"] = "space-evenly";
})(FlexBlockJustifyProperty || (FlexBlockJustifyProperty = {}));
class FlexBlock extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.wrapChild = child => {
            const { gutterWidth, shouldFlexChildren, childWrapperStyle } = this.props;
            if (!child) {
                return child;
            }
            const style = {};
            const className = classnames_1.default(child.props.className, 'rc-flex-block-child', {
                'rc-flex-block-child-flex': shouldFlexChildren
            });
            if (gutterWidth) {
                style.padding = `${gutterWidth / 2}px`;
            }
            return child.type === FlexBlockItem_1.FlexBlockItem ? (React.cloneElement(child, {
                style: Object.assign({}, style, childWrapperStyle, child.props.style)
            })) : (React.createElement("div", { className: className, style: Object.assign({}, style, childWrapperStyle) }, child));
        };
    }
    renderChildren() {
        const { children, shouldUnwrapChildren } = this.props;
        if (shouldUnwrapChildren) {
            return children;
        }
        return React.Children.map(children, this.wrapChild);
    }
    render() {
        const { direction, align, justify, shouldWrap, gutterWidth, style } = this.props;
        const className = classnames_1.default('rc-flex-block', this.props.className, {
            'rc-flex-block-vertical': direction === FlexBlockDirectionProperty.COLUMN,
            'rc-flex-block-wrap': shouldWrap,
            'rc-flex-block-align-start': align === FlexBlockAlignProperty.START,
            'rc-flex-block-align-center': align === FlexBlockAlignProperty.CENTER,
            'rc-flex-block-align-end': align === FlexBlockAlignProperty.END,
            'rc-flex-block-justify-start': justify === FlexBlockJustifyProperty.START,
            'rc-flex-block-justify-center': justify === FlexBlockJustifyProperty.CENTER,
            'rc-flex-block-justify-end': justify === FlexBlockJustifyProperty.END,
            'rc-flex-block-justify-space-around': justify === FlexBlockJustifyProperty.SPACE_AROUND,
            'rc-flex-block-justify-space-between': justify === FlexBlockJustifyProperty.SPACE_BETWEEN,
            'rc-flex-block-justify-space-evenly': justify === FlexBlockJustifyProperty.SPACE_EVENLY
        });
        const containerStyle = Object.assign({}, style);
        if (gutterWidth) {
            containerStyle.margin = `-${gutterWidth / 2}px`;
        }
        return (React.createElement("div", { className: className, style: containerStyle }, this.renderChildren()));
    }
}
FlexBlock.ROW = FlexBlockDirectionProperty.ROW;
FlexBlock.COLUMN = FlexBlockDirectionProperty.COLUMN;
FlexBlock.CENTER = FlexBlockJustifyProperty.CENTER;
FlexBlock.START = FlexBlockJustifyProperty.START;
FlexBlock.END = FlexBlockJustifyProperty.END;
FlexBlock.SPACE_BETWEEN = FlexBlockJustifyProperty.SPACE_BETWEEN;
FlexBlock.SPACE_AROUND = FlexBlockJustifyProperty.SPACE_AROUND;
FlexBlock.SPACE_EVENLY = FlexBlockJustifyProperty.SPACE_EVENLY;
FlexBlock.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    direction: PropTypes.oneOf([
        FlexBlockDirectionProperty.ROW,
        FlexBlockDirectionProperty.COLUMN
    ]),
    align: PropTypes.oneOf([
        FlexBlockJustifyProperty.CENTER,
        FlexBlockJustifyProperty.START,
        FlexBlockJustifyProperty.END
    ]),
    justify: PropTypes.oneOf([
        FlexBlockAlignProperty.CENTER,
        FlexBlockAlignProperty.START,
        FlexBlockAlignProperty.END
    ]),
    gutterWidth: PropTypes.number,
    shouldFlexChildren: PropTypes.bool,
    shouldWrap: PropTypes.bool,
    shouldUnwrapChildren: PropTypes.bool,
    childWrapperStyle: PropTypes.object,
    style: PropTypes.object
};
FlexBlock.defaultProps = {
    children: null,
    className: null,
    direction: FlexBlockDirectionProperty.ROW,
    align: null,
    justify: null,
    gutterWidth: 5,
    shouldFlexChildren: false,
    shouldWrap: false,
    shouldUnwrapChildren: false,
    childWrapperStyle: {},
    style: {}
};
exports.FlexBlock = FlexBlock;
//# sourceMappingURL=FlexBlock.js.map