import React from 'react';
import { Col, Glyphicon, Grid, Row } from 'react-bootstrap';
import {
  DATASET_COUNT,
  FILE_COUNT,
  VOLUME,
} from '../../constants/parameterTypes';
import DOIBadge from '../doi/DOIBadge';
import ResponsiveTable from '../Table/ResponsiveTable';
import InvestigationWidget from './InvestigationWidget';
import { beamlineFormatter, dateFormatter, nameFormatter } from './utils';
import { stringifyBytesSize } from '../../helpers';

function volumeFormatter(cell, investigation) {
  const volume = investigation.parameters.find((o) => o.name === VOLUME);
  if (volume && volume.value && volume.value !== 0) {
    return stringifyBytesSize(volume.value);
  }
}

function experimentFormatter(cell, investigation, rowIndex, extraData) {
  return (
    <Grid style={{ textAlign: 'center' }}>
      <Row className="show-grid">
        <Col xs={12} md={12}>
          {nameFormatter(
            investigation,
            extraData.props.withProposalLinks,
            extraData.props.user.isAdministrator
          )}
        </Col>
      </Row>
      <Row className="show-grid">
        <Col xs={12} md={12}>
          <span style={{ fontWeight: 'bold' }}>
            {beamlineFormatter(investigation, investigation.visitId)}
          </span>
        </Col>
      </Row>
      <Row className="show-grid">
        <Col xs={12}>
          <div style={{ color: 'gray', fontStyle: 'italic' }}>
            {investigation.summary}
          </div>
        </Col>
      </Row>
      <Row className="show-grid" style={{ fontSize: 10 }}>
        <Col xs={12}>
          <DOIBadge doi={investigation.doi} />
        </Col>
      </Row>
    </Grid>
  );
}

/**
 * This looks into the parameters of the investigation
 */
function getParameter(investigation, parameterName) {
  const parameter = investigation.parameters.find(
    (o) => o.name === parameterName
  );
  if (parameter && parameter.value) {
    return parameter.value;
  }
}

function fileCountFormatter(cell, investigation) {
  const fileCount = getParameter(investigation, FILE_COUNT);

  if (!fileCount) {
    return undefined;
  }

  return (
    <span style={{ width: 50, textAlign: 'right', float: 'left' }}>
      {fileCount}
    </span>
  );
}

function datasetCountFormatter(cell, investigation) {
  const datasetCount = investigation.parameters.find(
    (o) => o.name === DATASET_COUNT
  );
  if (datasetCount && datasetCount.value) {
    return (
      <>
        <span style={{ width: 40, textAlign: 'right', float: 'left' }}>
          {datasetCount.value}
        </span>
        <span
          style={{
            width: 70,
            marginLeft: 5,
            float: 'left',
            fontStyle: 'italic',
            color: '#999',
            fontSize: 12,
          }}
        >
          ({volumeFormatter(cell, investigation)})
        </span>
      </>
    );
  }
}

function getLgHeaderStyle(width, hidden) {
  return {
    xs: { hidden: true },
    sm: { hidden: true },
    md: { hidden: true },
    lg: { hidden, width, textAlign: 'center' },
  };
}

function getColumns(props) {
  return [
    {
      text: 'id',
      dataField: 'id',
      hidden: true,
    },
    {
      text: 'Experiment',
      dataField: 'name',
      formatter: experimentFormatter,
      formatExtraData: props,
      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: (_, investigation, __, props) =>
        nameFormatter(
          investigation,
          props.withProposalLinks,
          props.user.isAdministrator
        ),
      formatExtraData: props,
      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: (visitId, investigation) => (
        <span style={{ fontWeight: 'bold' }}>
          {beamlineFormatter(investigation, visitId)}
        </span>
      ),
      sort: true,
      responsiveHeaderStyle: {
        xs: { hidden: true },
        sm: { hidden: true },
        md: { width: 110, textAlign: 'center' },
        lg: { width: 110, textAlign: 'center' },
      },
    },
    {
      text: 'Start Date',
      dataField: 'startDate',
      formatter: dateFormatter,
      sort: true,
      responsiveHeaderStyle: getLgHeaderStyle(110, false),
    },
    {
      text: 'Title',
      dataField: 'summary',
      sort: true,
      responsiveHeaderStyle: {
        xs: { hidden: true },
        sm: { hidden: true },
      },
    },
    {
      text: 'Datasets',
      dataField: 'datasets',
      formatter: datasetCountFormatter,
      responsiveHeaderStyle: getLgHeaderStyle(
        130,
        !props.showInvestigationStats
      ),
    },
    {
      text: 'Files',
      hidden: !props.user.isAdministrator,
      dataField: 'dummy-1',
      isDummyField: true,
      formatter: fileCountFormatter,
      responsiveHeaderStyle: getLgHeaderStyle(
        80,
        !props.showInvestigationStats
      ),
    },
    {
      text: 'Release',
      dataField: 'releaseDate',
      formatter: dateFormatter,
      sort: true,
      responsiveHeaderStyle: getLgHeaderStyle(110, false),
    },
    {
      text: 'DOI',
      dataField: 'doi',
      formatter: (doi) => <DOIBadge doi={doi} />,
      sort: true,
      responsiveHeaderStyle: getLgHeaderStyle(260, false),
    },
  ];
}

function InvestigationTable(props) {
  const { expanded, user, investigations } = props;

  const expandRow = {
    showExpandColumn: true,
    expanded,
    expandColumnPosition: 'right',
    expandHeaderColumnRenderer: ({ isAnyExpands }) => {
      if (isAnyExpands) {
        return (
          <span style={{ fontSize: 18 }}>
            <Glyphicon glyph="zoom-out" />
          </span>
        );
      }
      return (
        <span style={{ fontSize: 18 }}>
          <Glyphicon glyph="zoom-in" />
        </span>
      );
    },
    expandColumnRenderer: ({ expanded }) => {
      if (expanded) {
        return <Glyphicon glyph="zoom-out" />;
      }
      return <Glyphicon glyph="zoom-in" />;
    },
    renderer: (investigation) => (
      <InvestigationWidget
        investigation={investigation}
        sessionId={user.sessionId}
      />
    ),
  };

  return (
    <ResponsiveTable
      data={investigations}
      columns={getColumns(props)}
      expandRow={expandRow}
    />
  );
}

export default InvestigationTable;
