'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import {Button as Btn} from 'react-bootstrap';
import classnames from 'classnames';

export type Props = {
    testAutomationId?: string;
    withIcon?: boolean;
    iconOnly?: boolean;
    inline?: boolean;
} & Partial<DefaultProps> &
    Btn.ButtonProps;

export type DefaultProps = {
    testAutomationId: string;
    withIcon: boolean;
    iconOnly: boolean;
};

export class Button extends React.Component<Props> {
    static propTypes = {
        testAutomationId: PropTypes.string,
        withIcon: PropTypes.bool,
        iconOnly: PropTypes.bool,
        children: PropTypes.node,
        className: PropTypes.string,
        inline: PropTypes.bool
    };

    static defaultProps = {
        testAutomationId: 'button',
        withIcon: false,
        iconOnly: false,
        children: null,
        className: null,
        inline: false
    };

    render() {
        let {
            withIcon,
            iconOnly,
            className,
            children,
            testAutomationId,
            inline,
            ...props
        } = this.props;

        let classNames = classnames(className, {
            'rc-button-icon-only': iconOnly,
            'rc-button-with-icon': withIcon,
            'rc-button-with-inline': inline
        });

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