import React from 'react';
import PropTypes from 'prop-types';
import {Row as ReactBootstrapRow} from 'react-bootstrap';
import classnames from 'classnames';

type Props = {
    children?: React.ReactNode;
    className?: string;
    testAutomationId?: string;
    noGutters?: boolean;
} & Partial<DefaultProps> &
    ReactBootstrapRow.RowProps;

type DefaultProps = {
    noGutters: boolean;
};

export class Row extends React.Component<Props> {
    static propTypes = {
        children: PropTypes.node.isRequired,
        className: PropTypes.string,
        testAutomationId: PropTypes.string,
        noGutters: PropTypes.bool
    };

    static defaultProps = {
        noGutters: false,
        className: null,
        testAutomationId: null
    };

    render() {
        let {children, noGutters, className, testAutomationId, ...props} = this.props;

        let classNames = classnames(className, {
            'rc-row-noGutter': noGutters
        });

        return (
            <ReactBootstrapRow
                data-test-automation-id={testAutomationId}
                {...props}
                className={classNames}>
                {children}
            </ReactBootstrapRow>
        );
    }
}
