import React from "react";
import { connect } from "react-redux";
import { sortBy, transform } from "lodash";
import { Row, Col, Table, Badge, Label, Panel, ListGroup } from "react-bootstrap";

import { IDRow, ListGroupItem, LoadingPlaceholder } from "../../base";
import { getHmm } from "../actions";

class HMMDetail extends React.Component {

    componentDidMount () {
        this.props.onGet(this.props.match.params.hmmId);
    }

    render () {

        if (this.props.detail === null) {
            return <LoadingPlaceholder maring="130px" />;
        }

        const clusterMembers = this.props.detail.entries.map((entry, index) =>
            <tr key={index}>
                <td>
                    <a href={`http://www.ncbi.nlm.nih.gov/protein/${entry.accession}`} target="_blank">
                        {entry.accession}
                    </a>
                </td>
                <td>{entry.name}</td>
                <td>{entry.organism}</td>
            </tr>
        );

        const names = this.props.detail.names.map((name, index) => <span key={index}><Label>{name}</Label> </span>);

        const taxonomy = ["families", "genera"].reduce((result, key) => {
            const entries = sortBy(transform(this.props.detail[key], (result, count, name) => {
                result.push({
                    name,
                    count
                });
            }, []), "count").reverse();

            result[key] = entries.map(entry =>
                <ListGroupItem key={entry.name}>
                    {entry.name} <Badge>{entry.count}</Badge>
                </ListGroupItem>
            );
        }, {});

        const listGroupStyle = {
            maxHeight: 210,
            overflowY: "auto"
        };

        return (
            <div>
                <h3 className="view-header">
                    <strong>{this.props.detail.names[0]}</strong>
                </h3>

                <Table bordered>
                    <tbody>
                        <tr>
                            <th className="col-md-3">Cluster</th>
                            <td className="col-md-9">{this.props.detail.cluster}</td>
                        </tr>

                        <IDRow id={this.props.detail.id} />

                        <tr>
                            <th>Best Definitions</th>
                            <td>{names}</td>
                        </tr>

                        <tr>
                            <th>Length</th>
                            <td>{this.props.detail.length}</td>
                        </tr>

                        <tr>
                            <th>Mean Entropy</th>
                            <td>{this.props.detail.mean_entropy}</td>
                        </tr>

                        <tr>
                            <th>Total Entropy</th>
                            <td>{this.props.detail.total_entropy}</td>
                        </tr>
                    </tbody>
                </Table>

                <h5>
                    <strong>Cluster Members</strong> <Badge>{this.props.detail.entries.length}</Badge>
                </h5>

                <Panel style={{height: "408px"}}>
                    <Table className="cluster-table" fill>
                        <thead>
                            <tr>
                                <th>Accession</th>
                                <th>Name</th>
                                <th>Organism</th>
                            </tr>
                        </thead>
                        <tbody>
                            {clusterMembers}
                        </tbody>
                    </Table>
                </Panel>

                <Row>
                    <Col md={6}>
                        <h5>
                            <strong>Families</strong>
                        </h5>
                        <ListGroup style={listGroupStyle}>
                            {taxonomy.families}
                        </ListGroup>
                    </Col>
                    <Col md={6}>
                        <h5>
                            <strong>
                                Genera
                            </strong>
                        </h5>
                        <ListGroup style={listGroupStyle}>
                            {taxonomy.genera}
                        </ListGroup>
                    </Col>
                </Row>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    detail: state.hmms.detail
});

const mapDispatchToProps = (dispatch) => ({

    onGet: (hmmId) => {
        dispatch(getHmm(hmmId));
    }

});

const Container = connect(mapStateToProps, mapDispatchToProps)(HMMDetail);

export default Container;

@@ -71,26 +71,20 @@
 rt %7B
+ map,
  sortBy
-, transform
  %7D f
@@ -290,16 +290,414 @@
 ions%22;%0A%0A
+const HMMTaxonomy = (%7B counts %7D) =%3E %7B%0A    const components = sortBy(map(counts, (count, name) =%3E (%7Bname, count%7D)), %22name%22).map(entry =%3E%0A        %3CListGroupItem key=%7Bentry.name%7D%3E%0A            %7Bentry.name%7D %3CBadge%3E%7Bentry.count%7D%3C/Badge%3E%0A        %3C/ListGroupItem%3E%0A    );%0A%0A    return (%0A        %3CListGroup style=%7B%7BmaxHeight: 210, overflowY: %22auto%22%7D%7D%3E%0A            %7Bcomponents%7D%0A        %3C/ListGroup%3E%0A    );%0A%7D;%0A%0A
 class HM
@@ -1504,647 +1504,8 @@
 );%0A%0A
-        const taxonomy = %5B%22families%22, %22genera%22%5D.reduce((result, key) =%3E %7B%0A            const entries = sortBy(transform(this.props.detail%5Bkey%5D, (result, count, name) =%3E %7B%0A                result.push(%7B%0A                    name,%0A                    count%0A                %7D);%0A            %7D, %5B%5D), %22count%22).reverse();%0A%0A            result%5Bkey%5D = entries.map(entry =%3E%0A                %3CListGroupItem key=%7Bentry.name%7D%3E%0A                    %7Bentry.name%7D %3CBadge%3E%7Bentry.count%7D%3C/Badge%3E%0A                %3C/ListGroupItem%3E%0A            );%0A        %7D, %7B%7D);%0A%0A        const listGroupStyle = %7B%0A            maxHeight: 210,%0A            overflowY: %22auto%22%0A        %7D;%0A%0A
     
@@ -3643,125 +3643,57 @@
    %3C
-ListGroup style=%7BlistGroupStyle%7D%3E%0A                            %7Btaxonomy.families%7D%0A                        %3C/ListGroup
+HMMTaxonomy counts=%7Bthis.props.detail.families%7D /
 %3E%0A  
@@ -3952,123 +3952,55 @@
    %3C
-ListGroup style=%7BlistGroupStyle%7D%3E%0A                            %7Btaxonomy.genera%7D%0A                        %3C/ListGroup
+HMMTaxonomy counts=%7Bthis.props.detail.genera%7D /
 %3E%0A  

Split HMM detail taxonomy into separate components