import React from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import moment from 'moment';
import {
  getDatasetParameterByPrefixName,
  getDatasetParameterValueByName,
} from '../../helpers';
import ParameterTableWidget from '../Instrument/ParameterTableWidget';
import GalleryDatasetThumbnail from './GalleryDatasetThumbnail';
import EMDatasetSummary from './EMDatasetSummary';
import MXDatasetSummary from './MXDatasetSummary';

class DatasetSummary extends React.Component {
  getParameters() {
    return [
      { name: 'Name', value: this.props.dataset.name },
      {
        name: 'Definition',
        value: getDatasetParameterValueByName(this.props.dataset, 'definition'),
      },
      {
        name: 'Start',
        value: moment(this.props.dataset.startDate).format('LTS'),
      },
      { name: 'Sample', value: this.props.dataset.sampleName },
      {
        name: 'Description',
        value: getDatasetParameterValueByName(
          this.props.dataset,
          'Sample_description'
        ),
      },
    ];
  }
  render() {
    const technique = getDatasetParameterValueByName(
      this.props.dataset,
      'definition'
    );
    if (technique) {
      if (technique === 'EM') {
        return <EMDatasetSummary dataset={this.props.dataset} />;
      }
    } else {
      /** some MX datasets has no definition but we can figure out that it is MX because will have many MX_ parameters */
      if (
        getDatasetParameterByPrefixName(this.props.dataset, 'MX_').length > 1
      ) {
        /** It is MX */
        return <MXDatasetSummary dataset={this.props.dataset} />;
      }
    }

    return (
      <Grid fluid style={{ margin: 20 }}>
        <Row>
          <Col xs={12} md={3}>
            <ParameterTableWidget striped parameters={this.getParameters()} />
          </Col>
          <Col xs={12} sm={12} md={2}>
            <GalleryDatasetThumbnail
              dataset={this.props.dataset}
              sessionId={this.props.sessionId}
              index={0}
            />
          </Col>
          <Col xs={12} sm={12} md={2}>
            <GalleryDatasetThumbnail
              dataset={this.props.dataset}
              sessionId={this.props.sessionId}
              index={1}
            />
          </Col>
          <Col xs={12} sm={12} md={2}>
            <GalleryDatasetThumbnail
              dataset={this.props.dataset}
              sessionId={this.props.sessionId}
              index={2}
            />
          </Col>
          <Col xs={12} sm={12} md={2}>
            <GalleryDatasetThumbnail
              dataset={this.props.dataset}
              sessionId={this.props.sessionId}
              index={3}
            />
          </Col>
        </Row>
      </Grid>
    );
  }
}

export default DatasetSummary;
