import PropTypes from 'prop-types';
import React from 'react';
import { Glyphicon, Label } from 'react-bootstrap';

/** React component which renders a tag label */
class TagLabel extends React.Component {
  render() {
    const { tag, showDeleteButton } = this.props;

    return (
      <div style={{ display: 'inline-block', marginRight: 4 }}>
        <Label
          style={{
            backgroundColor: tag.color,
            borderBottomLeftRadius: 10,
            borderBottomRightRadius: showDeleteButton ? 0 : 10,
            borderTopLeftRadius: 10,
            borderTopRightRadius: showDeleteButton ? 0 : 10,
            display: 'inline-block',
            marginBottom: 2,
          }}
        >
          {tag.name}
        </Label>

        {showDeleteButton && (
          <Label
            style={{
              backgroundColor: '#777',
              borderTopLeftRadius: 0,
              borderTopRightRadius: 10,
              borderBottomRightRadius: 10,
              borderBottomLeftRadius: 0,
              display: 'inline-block',
              marginBottom: 2,
              paddingLeft: 0,
              paddingRight: 1,
            }}
          >
            <Glyphicon
              glyph="remove"
              bsSize="xsmall"
              style={{
                backgroundColor: '#777',
                color: 'white',
                verticalAlign: 'bottom',
              }}
              onClick={() => this.props.onDeleteTagClicked(tag)}
            />
          </Label>
        )}
      </div>
    );
  }
}

TagLabel.propTypes = {
  /* Callback function used to remove a tag from the selection. Used in EVENT context only */
  onDeleteTagClicked: PropTypes.func,
  /* Whether the delete button is displayed or not */
  showDeleteButton: PropTypes.bool,
  /* the tag to render */
  tag: PropTypes.object.isRequired,
};

TagLabel.defaultProps = {
  showDeleteButton: false,
};

export default TagLabel;
