// @flow
import React from 'react';
import PropTypes from 'prop-types';
import type { ReactChildren } from 'react-flow-types';

import FlexCell from './FlexCell';
import Tag from './Tag';
import TextEllipsis from './TextEllipsis';

import wrapIfNotElement from './utils/wrapIfNotElement';

export type Props = {
    basic?: ReactChildren,
    tag?: ReactChildren,
    statusIcon?: ReactChildren,
    children?: ReactChildren, // eslint-disable-line react/require-default-props
};

function BasicRow({ basic, tag, statusIcon, children, ...otherProps }: Props) {
    if (!basic) {
        return null;
    }

    return (
        <div {...otherProps}>
            <FlexCell shrink>
                <TextEllipsis>{basic}</TextEllipsis>
            </FlexCell>

            {tag && wrapIfNotElement(tag, { with: Tag })}
            {statusIcon && wrapIfNotElement(statusIcon, { with: 'span' })}
            {children}
        </div>
    );
}

BasicRow.propTypes = {
    basic: PropTypes.node,
    tag: PropTypes.node,
    statusIcon: PropTypes.node,
};

BasicRow.defaultProps = {
    basic: undefined,
    tag: undefined,
    statusIcon: undefined,
};

export default BasicRow;

@@ -184,51 +184,8 @@
 ag';
-%0Aimport TextEllipsis from './TextEllipsis';
 %0A%0Aim
@@ -633,74 +633,15 @@
 ink%3E
-%0A                %3CTextEllipsis%3E%7Bbasic%7D%3C/TextEllipsis%3E%0A            
+%7Bbasic%7D
 %3C/Fl

Make text labels break into multi-lines by default.