import React from 'react';
import { Button, Col, Glyphicon, Grid, Label, Row } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import {
  INSTRUMENT_NAMES,
  INVESTIGATION_NAMES,
  TITLE,
} from '../../constants/parameterTypes';
import DOIBadge from '../doi/DOIBadge';
import ResponsiveTable from '../Table/ResponsiveTable';
import UI from '../../config/ui/config';

class DataCollectionTable extends React.Component {
  doiFormatter(cell) {
    return <DOIBadge doi={cell} />;
  }

  titleFormatter(cell, datacollection) {
    const title = datacollection.parameters.find((o) => o.name === TITLE);
    if (title && title.value) {
      return title.value;
    }
  }

  nameFormatter(cell, datacollection) {
    const names = datacollection.parameters.find(
      (o) => o.name === INVESTIGATION_NAMES
    );
    if (names && names.value) {
      let short = JSON.parse(JSON.stringify(names.value));

      if (!UI.investigationContainer.isDatasetListVisible) {
        return short;
      }

      if (short.length > 13) {
        short = `${short.slice(0, 10)}...`;
      }

      return (
        <Link to={`/public/${datacollection.doi}`}>
          <Button bsSize="xsmall" style={{ width: 120, textAlign: 'left' }}>
            <Glyphicon glyph="circle-arrow-right" />
            <span style={{ marginLeft: 10 }}>{short} </span>
          </Button>
        </Link>
      );
    }
  }

  beamlineFormatter(cell, datacollection) {
    const names = datacollection.parameters.find(
      (o) => o.name === INSTRUMENT_NAMES
    );
    if (names && names.value) {
      return names.value;
    }
  }

  releaseFormatter() {
    return <Label bsStyle="primary">RELEASED</Label>;
  }

  datasetCountFormmater(cell, datacolletion) {
    return datacolletion.dataCollectionDatasets.length;
  }

  dataCollectionFormatter(cell, datacolletion, rowIndex, extraData) {
    return (
      <Grid style={{ textAlign: 'center' }}>
        <Row className="show-grid">
          <Col xs={12} md={12}>
            {extraData.nameFormatter(cell, datacolletion, extraData)}
          </Col>
        </Row>
        <Row className="show-grid">
          <Col xs={12} md={12}>
            {extraData.beamlineFormatter(cell, datacolletion, extraData)}
          </Col>
        </Row>
        <Row className="show-grid">
          <Col xs={12}>
            <div style={{ color: 'gray', fontStyle: 'italic' }}>
              {' '}
              {extraData.titleFormatter(cell, datacolletion, extraData)}
            </div>
          </Col>
        </Row>
        <Row className="show-grid" style={{ fontSize: 10 }}>
          <Col xs={12}>
            <span>
              {extraData.doiFormatter(
                datacolletion.doi,
                datacolletion,
                extraData
              )}
            </span>
          </Col>
        </Row>
      </Grid>
    );
  }

  getColumns() {
    return [
      {
        text: 'id',
        dataField: 'id',
        hidden: true,
      },
      {
        text: 'Experiment',
        dataField: 'name',
        formatter: this.dataCollectionFormatter,
        formatExtraData: this,
        sort: true,
        hidden: false,
        headerStyle: () => ({ width: '50%', textAlign: 'center' }),
        responsiveHeaderStyle: {
          xs: { width: '100%' },
          sm: { width: '100%' },
          md: { hidden: true },
          lg: { hidden: true },
        },
      },
      {
        text: 'Proposal',
        dataField: 'name',
        formatter: this.nameFormatter,
        formatExtraData: this,
        sort: true,
        hidden: false,
        headerStyle: () => ({ width: '50%', textAlign: 'center' }),
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
          md: { width: 140, textAlign: 'center' },
          lg: { width: 140, textAlign: 'center' },
        },
      },
      {
        text: 'Beamline',
        dataField: 'visitId',
        formatter: this.beamlineFormatter,
        sort: true,
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
          md: { width: 140, textAlign: 'center' },
          lg: { width: 140, textAlign: 'center' },
        },
      },
      {
        text: 'Title',
        dataField: 'dummy-1',
        isDummyField: true,
        formatter: this.titleFormatter,
        sort: true,
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
        },
      },
      {
        text: 'Datasets',
        dataField: 'dummy-2',
        isDummyField: true,
        formatter: this.datasetCountFormmater,
        sort: true,
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
          md: { width: 100, textAlign: 'center' },
          lg: { width: 100, textAlign: 'center' },
        },
      },

      {
        text: 'DOI',
        dataField: 'doi',
        formatter: this.doiFormatter,
        sort: true,
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
          md: { hidden: true },
          lg: { width: 300, textAlign: 'center' },
        },
      },
    ];
  }

  render() {
    return (
      <ResponsiveTable
        data={this.props.datacollections}
        columns={this.getColumns()}
      />
    );
  }
}

export default DataCollectionTable;
