import PropTypes from 'prop-types';
import React from 'react';
import { ButtonToolbar, Col, Grid, Row } from 'react-bootstrap';
import EventListMenuButton from '../Menu/EventListMenuButton';

/**
 * The menu displayed above the tag list
 */
class TagListMenu extends React.Component {
  render() {
    return (
      <Grid fluid style={{ marginTop: 10 }}>
        <Row>
          <Col xs={2}>
            <ButtonToolbar>
              {!this.props.logbookContext.isReleased && (
                <div onClick={this.props.onNewTagButtonClicked}>
                  <EventListMenuButton
                    text="New"
                    tooltipText="Create a new tag"
                    glyph="plus"
                    isEnabled
                  />
                </div>
              )}
            </ButtonToolbar>
          </Col>
        </Row>
      </Grid>
    );
  }
}

TagListMenu.propTypes = {
  /** Callback function used to display new tag form */
  onNewTagClicked: PropTypes.func,
};

export default TagListMenu;
