import React, { cloneElement, Component, } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SoftFormControlLayoutIcons } from './SoftFormControlLayoutIcons';
export const ICON_SIDES = ['left', 'right'];
export class SoftFormControlLayout extends Component {
    render() {
        const { children, icon, clear, fullWidth, isLoading, compressed, className, prepend, append, ...rest } = this.props;
        const classes = classNames('softFormControlLayout', {
            'softFormControlLayout--fullWidth': fullWidth,
            'softFormControlLayout--compressed': compressed,
            'softFormControlLayout--group': prepend || append,
        }, className);
        const prependNodes = this.renderPrepends();
        const appendNodes = this.renderAppends();
        let clonedChildren;
        if ((prepend || append) && children) {
            clonedChildren = cloneElement(children, {
                className: `${children.props.className} softFormControlLayout__child--noStyle`,
            });
        }
        return (React.createElement("div", Object.assign({ className: classes }, rest),
            prependNodes,
            React.createElement("div", { className: "softFormControlLayout__childrenWrapper" },
                clonedChildren || children,
                React.createElement(SoftFormControlLayoutIcons, { icon: icon, clear: clear, isLoading: isLoading })),
            appendNodes));
    }
    renderPrepends() {
        const { prepend } = this.props;
        if (!prepend) {
            return;
        }
        let prependNodes;
        if (Array.isArray(prepend)) {
            prependNodes = prepend.map((item, index) => {
                return this.createSideNode(item, 'prepend', index);
            });
        }
        else {
            prependNodes = this.createSideNode(prepend, 'prepend');
        }
        return prependNodes;
    }
    renderAppends() {
        const { append } = this.props;
        if (!append) {
            return;
        }
        let appendNodes;
        if (Array.isArray(append)) {
            appendNodes = append.map((item, index) => {
                return this.createSideNode(item, 'append', index);
            });
        }
        else {
            appendNodes = this.createSideNode(append, 'append');
        }
        return appendNodes;
    }
    createSideNode(node, side, key) {
        return cloneElement(node, {
            className: `softFormControlLayout__${side}`,
            key: key
        });
    }
}
SoftFormControlLayout.propTypes = {
    children: PropTypes.node,
    icon: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.shape({
            type: PropTypes.string,
            side: PropTypes.oneOf(ICON_SIDES),
            onClick: PropTypes.func,
        }),
    ]),
    clear: PropTypes.shape({
        onClick: PropTypes.func,
    }),
    fullWidth: PropTypes.bool,
    isLoading: PropTypes.bool,
    className: PropTypes.string,
    compressed: PropTypes.bool,
    /**
     * Creates an input group with element(s) coming before children
     */
    prepend: PropTypes.oneOfType([
        PropTypes.node,
        PropTypes.arrayOf(PropTypes.node),
    ]),
    /**
     * Creates an input group with element(s) coming after children
     */
    append: PropTypes.oneOfType([
        PropTypes.node,
        PropTypes.arrayOf(PropTypes.node),
    ]),
};
SoftFormControlLayout.defaultProps = {
    isLoading: false,
    compressed: false,
};
//# sourceMappingURL=SoftFormControlLayout.js.map