import React from "react";
import { map, sortBy } from "lodash-es";
import { Row, Col, ListGroup, ListGroupItem, Panel } from "react-bootstrap";

import { LoadingPlaceholder } from "../../base";

export default function RebuildHistory ({ unbuilt, error }) {

    let content;

    if (unbuilt === null) {
        content = <LoadingPlaceholder margin="22px" />;
    } else {
        const historyComponents = map(sortBy(unbuilt.documents, "otu.name"), change =>
            <ListGroupItem key={change.id}>
                <Row>
                    <Col md={5}>
                        <strong>{change.otu.name}</strong>
                    </Col>
                    <Col md={7}>
                        {change.description || "No Description"}
                    </Col>
                </Row>
            </ListGroupItem>
        );

        content = (
            <ListGroup style={{overflowY: "auto", maxHeight: "700px"}}>
                {historyComponents}
            </ListGroup>
        );
    }

    const panelStyle = error ? "panel-danger" : "panel-default";

    return (
        <Panel className={panelStyle}>
            <Panel.Heading>Changes</Panel.Heading>
            <Panel.Body>
                {content}
            </Panel.Body>
        </Panel>
    );
}

@@ -252,16 +252,318 @@
 r %7D) %7B%0A%0A
+    const extraChanges = unbuilt.page_count %3E 1%0A        ? (%0A            %3CListGroupItem key=%22last-item%22%3E%0A                %3Cdiv style=%7B%7BtextAlign: %22right%22%7D%7D%3E%0A                    + %7Bunbuilt.total_count - unbuilt.per_page%7D more changes%0A                %3C/div%3E%0A            %3C/ListGroupItem%3E%0A        ) : null;%0A%0A
     let 
@@ -1258,16 +1258,47 @@
 onents%7D%0A
+                %7BextraChanges%7D%0A
         

Add build index modal extra changes message