import { sortBy } from 'lodash-es';
import PropTypes from 'prop-types';
import React from 'react';
import { Button, Col, Grid, Label, Row } from 'react-bootstrap';

/**
 * React component which renders a list of tags in a panel
 */
class TagListPanel extends React.Component {
  render() {
    const { availableTags, onEditButtonClicked } = this.props;

    if (!availableTags || availableTags.length === 0) {
      return null;
    }
    let detailedTags = [];
    const sortedAvailableTags = sortBy(availableTags, ['name']);
    detailedTags = sortedAvailableTags.map((tag, index) => (
      <TagListPanelLine
        key={index}
        tag={tag}
        onEditButtonClicked={onEditButtonClicked}
        isTagEditionEnabled={this.props.isTagEditionEnabled}
      />
    ));
    return (
      <div style={{ paddingBottom: 70 }}>
        <Grid fluid>
          {this.props.isTagEditionEnabled ? (
            <h3> Tags currently available in this proposal</h3>
          ) : (
            <h3> Tags used in this proposal</h3>
          )}
          <Row style={{ marginTop: 20 }}>
            <Col xs={0} md={1}>
              {' '}
            </Col>
            <Col xs={12} md={10}>
              {' '}
              {detailedTags}{' '}
            </Col>
            <Col xs={0} md={1}>
              {' '}
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

TagListPanel.propTypes = {
  /* List of available tags (can be null when there is no available tags yet)*/
  availableTags: PropTypes.array,
  /* Function trigered when the user click to edit the tag.*/
  onEditButtonClicked: PropTypes.func,
  /** Whether the tag list enables edition of tags or not */
  isTagEditionEnabled: PropTypes.bool,
};

class TagListPanelLine extends React.Component {
  render() {
    const { tag, onEditButtonClicked } = this.props;

    //set the tag scope
    let tagScope = null;
    if (tag.investigationId) {
      tagScope = (
        <span style={{ padding: 5, backgroundColor: '#f2f2f2' }}>
          {' '}
          proposal{' '}
        </span>
      );
    } else if (tag.beamlineName) {
      tagScope = (
        <span style={{ padding: 5, backgroundColor: '#f2f2f2' }}>
          {' '}
          beamline{' '}
        </span>
      );
    }

    return (
      <div>
        <Row>
          <div style={{ alignItems: 'center' }}>
            <Col xs={12} sm={2} style={{ textAlign: 'center' }}>
              <Label
                style={{
                  backgroundColor: tag.color,
                  borderRadius: 10,
                  display: 'inline-block',
                  paddingBottom: 5,
                  fontSize: 14,
                }}
              >
                {tag.name}
              </Label>
            </Col>

            <Col xs={12} sm={6} style={{ alignItems: 'stretch' }}>
              {tag.description ? (
                <span> {tag.description} </span>
              ) : (
                <span style={{ color: 'gray', fontStyle: 'italic' }}>
                  {' '}
                  No description yet
                </span>
              )}
            </Col>

            <Col xs={12} sm={3}>
              {tagScope}
            </Col>

            <Col xs={12} sm={1}>
              {this.props.isTagEditionEnabled && (
                <Button
                  bsStyle="primary"
                  bsSize="small"
                  onClick={() => onEditButtonClicked(tag)}
                >
                  Edit
                </Button>
              )}
            </Col>
          </div>
        </Row>
        <hr />
      </div>
    );
  }
}

TagListPanelLine.proptype = {
  /** tag object */
  tag: PropTypes.object,
  /** callback function when the user click the edit button */
  onEditButtonClicked: PropTypes.func,
  /** Whether the tag list enables edition of tags or not */
  isTagEditionEnabled: PropTypes.bool,
};

export default TagListPanel;
