import React from "react";
import Moment from "moment";
import Numeral from "numeral";
import PropTypes from "prop-types";
import { capitalize } from "lodash";
import { connect } from "react-redux";
import { Panel, Table } from "react-bootstrap";

import { updateSample } from "../actions";
import EditSample from "./Edit";

const SampleDetailGeneral = (props) => {

    const cells = ["name", "host", "isolate"].map(field =>
        <tr key={field}>
            <th className="col-xs-4">{capitalize(field)}</th>
            <td className="col-xs-8">{props[field]}</td>
        </tr>
    );

    let idCell;

    if (props.showIds) {
        idCell = (
            <tr>
                <th>Unique ID</th>
                <td>{props.sampleId}</td>
            </tr>
        );
    }

    return (
        <div>
            <table className="table table-bordered">
              <tbody>
                {cells}
                {idCell}
                <tr>
                  <th>Created</th>
                  <td>{Moment(props.createdAt).calendar()}</td>
                </tr>
                <tr>
                  <th>Created By</th>
                  <td>{props.userId}</td>
                </tr>
              </tbody>
            </table>

            <Panel header="Library">
                <Table bordered fill>
                    <tbody>
                        <tr>
                            <th className="col-xs-4">Read Count</th>
                            <td className="col-xs-8">{props.count}</td>
                        </tr>
                        <tr>
                            <th>Length Range</th>
                            <td>{props.lengthRange}</td>
                        </tr>
                        <tr>
                            <th>GC Content</th>
                            <td>{props.gc}</td>
                        </tr>
                        <tr>
                            <th>Paired</th>
                            <td>{props.paired ? "Yes": "No"}</td>
                        </tr>
                    </tbody>
                </Table>
            </Panel>

            <Panel header="Files">
                <Table bordered fill>
                    <tbody>
                        <tr>
                            <th className="col-xs-4">Original Files</th>
                            <td className="col-xs-8">{props.files.join(", ")}</td>
                        </tr>
                        <tr>
                            <th>Encoding</th>
                            <td>{props.encoding}</td>
                        </tr>
                    </tbody>
                </Table>
            </Panel>

            <EditSample />
        </div>
    );
};

SampleDetailGeneral.propTypes = {
    showIds: PropTypes.bool,
    canModify: PropTypes.bool,
    sampleId: PropTypes.string,
    name: PropTypes.string,
    host: PropTypes.string,
    files: PropTypes.array,
    isolate: PropTypes.string,
    lengthRange: PropTypes.string,
    encoding: PropTypes.string,
    gc: PropTypes.string,
    count: PropTypes.string,
    paired: PropTypes.bool,
    userId: PropTypes.string,
    createdAt: PropTypes.string,
    quality: PropTypes.object,
    onChangeValue: PropTypes.func
};

const mapStateToProps = (state) => {
    const detail = state.samples.detail;

    const isOwner = state.account.id === detail.user.id;

    const canModify = (
        detail.all_write ||
        (detail.group_write && state.account.groups.indexOf(detail.group) > -1) ||
        isOwner
    );

    return {
        canModify: canModify,
        sampleId: detail.id,
        name: detail.name,
        host: detail.host,
        createdAt: detail.created_at,
        isolate: detail.isolate,
        showIds: state.account.settings.show_ids,
        files: detail.files,
        paired: detail.paired,
        gc: Numeral(detail.quality.gc / 100).format("0.0 %"),
        count: Numeral(detail.quality.count).format("0.0 a"),
        encoding: detail.quality.encoding,
        lengthRange: detail.quality.length.join(" - "),
        userId: detail.user.id
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        onChangeValue: (sampleId, field, value) => {
            let update = {};
            update[field] = value;
            dispatch(updateSample(sampleId, update));
        }
    };
};

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

export default Container;

@@ -84,44 +84,8 @@
 l%22;%0A
-import PropTypes from %22prop-types%22;%0A
 impo
@@ -209,51 +209,8 @@
 %22;%0A%0A
-import %7B updateSample %7D from %22../actions%22;%0A
 impo
@@ -2635,1132 +2635,167 @@
 %7D;%0A%0A
-SampleDetailGeneral.propTypes = %7B%0A    showIds: PropTypes.bool,%0A    canModify: PropTypes.bool,%0A    sampleId: PropTypes.string,%0A    name: PropTypes.string,%0A    host: PropTypes.string,%0A    files: PropTypes.array,%0A    isolate: PropTypes.string,%0A    lengthRange: PropTypes.string,%0A    encoding: PropTypes.string,%0A    gc: PropTypes.string,%0A    count: PropTypes.string,%0A    paired: PropTypes.bool,%0A    userId: PropTypes.string,%0A    createdAt: PropTypes.string,%0A    quality: PropTypes.object,%0A    onChangeValue: PropTypes.func%0A%7D;%0A%0Aconst mapStateToProps = (state) =%3E %7B%0A    const detail = state.samples.detail;%0A%0A    const isOwner = state.account.id === detail.user.id;%0A%0A    const canModify = (%0A        detail.all_write %7C%7C%0A        (detail.group_write && state.account.groups.indexOf(detail.group) %3E -1) %7C%7C%0A        isOwner%0A    );%0A%0A    return %7B%0A        canModify: canModify,%0A        sampleId: detail.id,%0A        name: detail.name,%0A        host: detail.host,%0A        createdAt: detail.created_at,%0A        isolate: detail.isolate,%0A        showIds: state.account.settings.show_ids,%0A        files: detail.files,%0A        paired: detail.paired
+const mapStateToProps = (state) =%3E %7B%0A    const detail = state.samples.detail;%0A%0A    return %7B%0A        ...detail,%0A        showIds: state.account.settings.show_ids
 ,%0A  
@@ -3061,256 +3061,8 @@
 %7D;%0A%0A
-const mapDispatchToProps = (dispatch) =%3E %7B%0A    return %7B%0A        onChangeValue: (sampleId, field, value) =%3E %7B%0A            let update = %7B%7D;%0A            update%5Bfield%5D = value;%0A            dispatch(updateSample(sampleId, update));%0A        %7D%0A    %7D;%0A%7D;%0A%0A
 cons
@@ -3102,28 +3102,8 @@
 rops
-, mapDispatchToProps
 )(Sa

Improve code style in SampleGeneral component