import React, { PropTypes } from "react";
import Numeral from "numeral";
import { connect } from "react-redux";
import { Label, Table } from "react-bootstrap";
import { RelativeTime } from "virtool/js/components/Base";

import { getAnalysis } from "../../actions";
import { getTaskDisplayName } from "../../../utils";
import PathoscopeViewer from "./Pathoscope/Viewer";
import NuVsViewer from "./NuVs/Viewer";

class AnalysisDetail extends React.Component {

    static propTypes = {
        match: PropTypes.object,
        name: PropTypes.string,
        detail: PropTypes.object,
        getAnalysis: PropTypes.func
    };

    componentDidMount () {
        this.props.getAnalysis(this.props.match.params.analysisId);
    }

    render () {

        if (this.props.detail === null) {
            return <div />;
        }

        const detail = this.props.detail;

        let content;

        if (detail.algorithm === "pathoscope_bowtie") {
            content = <PathoscopeViewer {...detail}/>;
        }

        if (detail.algorithm === "nuvs") {
            content = <NuVsViewer {...detail} />;
        }

        return (
            <div>
                <Table bordered>
                    <tbody>
                        <tr>
                            <th className="col-md-3">Algorithm</th>
                            <td className="col-md-9">
                                {getTaskDisplayName(detail.algorithm)}
                            </td>
                        </tr>
                        <tr>
                            <th>Index Version</th>
                            <td><Label>{detail.index.version}</Label></td>
                        </tr>
                        <tr>
                            <th>Library Read Count</th>
                            <td>{Numeral(detail.read_count).format()}</td>
                        </tr>
                        <tr>
                            <th>Added</th>
                            <td><RelativeTime time={detail.created_at} /></td>
                        </tr>
                        <tr>
                            <th>User</th>
                            <td>{detail.user.id}</td>
                        </tr>
                    </tbody>
                </Table>

                {content}
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        detail: state.samples.analysisDetail
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        getAnalysis: (analysisId) => {
            dispatch(getAnalysis(analysisId));
        }
    };
};

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

export default Container;

@@ -153,16 +153,55 @@
 strap%22;%0A
+import %7B ScaleLoader %7D from %22halogen%22;%0A
 import %7B
@@ -843,15 +843,191 @@
 urn 
-%3Cdiv /%3E
+(%0A                %3Cdiv className=%22text-center%22 style=%7B%7Bheight: %22500px%22, paddingTop: %22220px%22%7D%7D%3E%0A                    %3CScaleLoader color=%22#3c8786%22 /%3E%0A                %3C/div%3E%0A            )
 ;%0A  
@@ -2148,11 +2148,13 @@
 %3Cth%3E
-Add
+Creat
 ed%3C/
@@ -2331,12 +2331,18 @@
 %3Cth%3E
-User
+Created By
 %3C/th

Change loading animation for Pathoscope detail