import * as React from 'react';
import classnames from 'classnames';
import {FlexBlock} from './flexBlock';
import {Icon} from './Icon';

type ChipsItemProps = {
    testAutomationId: string;
    onClose?: () => void;
};

export class ChipsItem extends React.PureComponent<ChipsItemProps> {
    static defaultProps = {
        testAutomationId: 'chipsItem'
    };

    renderCloseButton() {
        const {onClose} = this.props;

        if (!onClose) {
            return null;
        }

        return (
            <button
                data-test-automation-id="closeButton"
                className="rc-chips-item__close-button"
                onClick={onClose}>
                <Icon name="close" />
            </button>
        );
    }

    render() {
        const {children, testAutomationId, onClose} = this.props;
        const className = classnames('rc-chips-item', {
            'rc-chips-item--interactive': !!onClose
        });

        return (
            <div className={className} data-test-automation-id={testAutomationId}>
                <FlexBlock shouldUnwrapChildren gutterWidth={0} align={FlexBlock.CENTER}>
                    <div className="rc-chips-item__content" data-test-automation-id="content">
                        {children}
                    </div>
                    {this.renderCloseButton()}
                </FlexBlock>
            </div>
        );
    }
}
