"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const seemly_1 = require("seemly");
const _utils_1 = require("../../_utils");
const _mixins_1 = require("../../_mixins");
const styles_1 = require("../styles");
const spaceProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { align: String, justify: {
        type: String,
        default: 'start'
    }, inline: Boolean, vertical: Boolean, size: {
        type: [String, Number, Array],
        default: 'medium'
    }, itemStyle: [String, Object], wrap: {
        type: Boolean,
        default: true
    } });
exports.default = vue_1.defineComponent({
    name: 'Space',
    props: spaceProps,
    setup(props) {
        const { mergedClsPrefixRef } = _mixins_1.useConfig(props);
        const themeRef = _mixins_1.useTheme('Space', 'Space', undefined, styles_1.spaceLight, props, mergedClsPrefixRef);
        return {
            mergedClsPrefix: mergedClsPrefixRef,
            margin: vue_1.computed(() => {
                const { size } = props;
                if (Array.isArray(size)) {
                    return {
                        horizontal: size[0],
                        vertical: size[1]
                    };
                }
                if (typeof size === 'number') {
                    return {
                        horizontal: size,
                        vertical: size
                    };
                }
                const { self: { [_utils_1.createKey('gap', size)]: gap } } = themeRef.value;
                const { row, col } = seemly_1.getGap(gap);
                return {
                    horizontal: seemly_1.depx(col),
                    vertical: seemly_1.depx(row)
                };
            })
        };
    },
    render() {
        const { vertical, align, inline, justify, itemStyle, margin, wrap, mergedClsPrefix } = this;
        const children = _utils_1.flatten(_utils_1.getSlot(this));
        const horizontalMargin = `${margin.horizontal}px`;
        const semiHorizontalMargin = `${margin.horizontal / 2}px`;
        const verticalMargin = `${margin.vertical}px`;
        const semiVerticalMargin = `${margin.vertical / 2}px`;
        const lastIndex = children.length - 1;
        const isJustifySpace = justify.startsWith('space-');
        return (vue_1.h("div", { role: "none", class: `${mergedClsPrefix}-space`, style: {
                display: inline ? 'inline-flex' : 'flex',
                flexDirection: vertical ? 'column' : 'row',
                justifyContent: ['start', 'end'].includes(justify)
                    ? 'flex-' + justify
                    : justify,
                flexWrap: !wrap || vertical ? 'nowrap' : 'wrap',
                marginTop: vertical ? '' : `-${semiVerticalMargin}`,
                marginBottom: vertical ? '' : `-${semiVerticalMargin}`,
                alignItems: align
            } }, children.map((child, index) => (vue_1.h("div", { role: "none", style: [
                itemStyle,
                {
                    maxWidth: '100%'
                },
                vertical
                    ? {
                        marginBottom: index !== lastIndex ? verticalMargin : ''
                    }
                    : {
                        marginRight: isJustifySpace
                            ? justify === 'space-between' && index === lastIndex
                                ? ''
                                : semiHorizontalMargin
                            : index !== lastIndex
                                ? horizontalMargin
                                : '',
                        marginLeft: isJustifySpace
                            ? justify === 'space-between' && index === 0
                                ? ''
                                : semiHorizontalMargin
                            : '',
                        paddingTop: semiVerticalMargin,
                        paddingBottom: semiVerticalMargin
                    }
            ] }, child)))));
    }
});
