import React from "react";
import { connect } from "react-redux";
import { LinkContainer } from "react-router-bootstrap";
import { Row, Col, Label } from "react-bootstrap";
import { Icon, RelativeTime, ListGroupItem, Loader } from "../../base";
import { activeIndexIdSelector } from "../selectors";

export const IndexEntry = ({ activeId, document, refId }) => {
    let activeIcon;

    // Decide what icon/text should be shown at the right end of the index document. If the index is building a
    // spinner with "Building" is shown, if the index is the active index a green check is shown. Otherwise, no
    // content is shown at the right.
    if (document.id === activeId) {
        if (document.ready) {
            activeIcon = (
                <span className="pull-right">
                    <Icon name="check" bsStyle="success" /> <strong>Active</strong>
                </span>
            );
        } else {
            activeIcon = (
                <div className="pull-right">
                    <Loader size="14px" color="#3c8786" style={{ display: "inline" }} />
                    <strong> Building</strong>
                </div>
            );
        }
    }

    // The description of
    let changeDescription;

    if (document.change_count !== null) {
        // Text to show if no changes occurred since the last index build. Technically, should never be shown
        // because the rebuild button is not shown if no changes have been made.
        changeDescription = "No changes";

        // This should always test true in practice. Shows the number of changes and the number of OTUs
        // affected.
        if (document.change_count > 0) {
            changeDescription = (
                <span>
                    {document.change_count} {" changes made in "}
                    {document.modified_otu_count} {document.modified_otu_count === 1 ? "OTU" : "OTUs"}
                </span>
            );
        }
    }

    return (
        <LinkContainer to={`/refs/${refId}/indexes/${document.id}`} className="spaced">
            <ListGroupItem>
                <Row>
                    <Col md={3}>
                        <Label>Version {document.version}</Label>
                    </Col>
                    <Col md={3}>
                        Created <RelativeTime time={document.created_at} />
                    </Col>
                    <Col md={4}>{changeDescription}</Col>
                    <Col md={2}>{activeIcon}</Col>
                </Row>
            </ListGroupItem>
        </LinkContainer>
    );
};

const mapStateToProps = (state, ownProps) => ({
    document: state.indexes.documents[ownProps.index],
    activeId: activeIndexIdSelector(state),
    refId: state.references.detail.id
});

export default connect(mapStateToProps)(IndexEntry);

@@ -2127,34 +2127,34 @@
            %3CCol 
-md
+xs
 =%7B3%7D%3E%0A          
@@ -2168,21 +2168,22 @@
        %3C
-Label
+strong
 %3EVersion
@@ -2203,21 +2203,22 @@
 rsion%7D%3C/
-Label
+strong
 %3E%0A      
@@ -2263,18 +2263,18 @@
    %3CCol 
-md
+xs
 =%7B3%7D%3E%0A  
@@ -2409,79 +2409,196 @@
 =%7B4%7D
-%3E%7BchangeDescription%7D%3C/Col%3E%0A                    %3CCol md=%7B2%7D%3E%7BactiveIcon%7D
+ xsHidden smHidden%3E%0A                        %7BchangeDescription%7D%0A                    %3C/Col%3E%0A                    %3CCol xs=%7B6%7D md=%7B2%7D%3E%0A                        %7BactiveIcon%7D%0A                    
 %3C/Co

Make HistoryItem look better on small viewports