import PropTypes from 'prop-types';
import React from 'react';
import { Glyphicon } from 'react-bootstrap';
import moment from 'moment';
import TECHNIQUES from '../../config/techniques/techniques';
import { FILE_COUNT, VOLUME } from '../../constants/parameterTypes';
import { getDatasetParameterByName, stringifyBytesSize } from '../../helpers';
import ResponsiveTable from '../Table/ResponsiveTable';
import DatasetDownloadButton from './DatasetDownloadButton';
import DatasetWidget from './DatasetWidget';

class DatasetTable extends React.Component {
  constructor(props) {
    super(props);
    this.techniques = TECHNIQUES;
  }

  dateFormatter(date) {
    if (!date) {
      return '';
    }

    const parsedDate = moment(date);
    return (
      <>
        <Glyphicon glyph="time" style={{ marginRight: 5, top: 2 }} />
        {parsedDate.format(moment.HTML5_FMT.TIME)}
        <span style={{ marginLeft: 5, color: '#777', fontSize: 11 }}>
          {parsedDate.format('D MMM YYYY')}
        </span>
      </>
    );
  }

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

  fileCountFormatter(cell, dataset) {
    return getDatasetParameterByName(dataset, FILE_COUNT);
  }

  volumeFormatter(cell, dataset) {
    return stringifyBytesSize(getDatasetParameterByName(dataset, VOLUME));
  }

  downloadFormatter(cell, dataset, rowIndex, extraData) {
    const dataArchived = extraData.getParameter(dataset, '__dataArchived');
    if (dataArchived === 'False') {
      return 'N/A';
    }
    return (
      <DatasetDownloadButton
        sessionId={extraData.props.sessionId}
        id={dataset.id}
      />
    );
  }

  techniquesFormatter(cell, row) {
    if (row != null) {
      const definition = row.parameters.filter((o) => o.name === 'definition');
      if (definition) {
        if (definition.length > 0) {
          return definition[0].value;
        }
      }
    }
  }

  getColumns() {
    return [
      {
        text: 'id',
        dataField: 'id',
        hidden: true,
      },
      {
        text: 'Date',
        dataField: 'startDate',
        sort: true,
        hidden: false,
        formatter: this.dateFormatter,
        formatExtraData: this,
        headerStyle: () => ({ width: '50%', textAlign: 'center' }),
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
          md: { width: 150 },
          lg: { width: 150 },
        },
      },
      {
        text: 'Sample',
        dataField: 'sampleName',
        sort: true,
        hidden: false,
        headerStyle: () => ({ width: '50%', textAlign: 'center' }),
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
          md: { hidden: false },
          lg: { hidden: false },
        },
      },
      {
        text: 'Dataset',
        dataField: 'name',
        sort: true,
        hidden: false,
        headerStyle: () => ({ width: '50%', textAlign: 'center' }),
        responsiveHeaderStyle: {
          xs: { hidden: false },
          sm: { hidden: false },
          md: { hidden: false },
          lg: { hidden: false },
        },
      },
      {
        text: 'Definition',
        dataField: 'definition',
        formatter: this.techniquesFormatter,
        sort: true,
        hidden: false,
        headerStyle: () => ({ width: '50%', textAlign: 'center' }),
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
          md: { width: 130 },
          lg: { width: 130 },
        },
      },
      {
        text: 'Location',
        dataField: 'location',
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
          md: { hidden: true },
          lg: { hidden: true },
        },
      },
      {
        text: 'Files',
        dataField: '__fileCount',
        sort: true,
        hidden: false,
        formatter: this.fileCountFormatter,
        formatExtraData: this,
        headerStyle: () => ({ width: '50%', textAlign: 'center' }),
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
          md: { width: 80 },
          lg: { width: 80 },
        },
      },
      {
        text: 'Size',
        dataField: VOLUME,
        sort: true,
        hidden: false,
        formatter: this.volumeFormatter,
        formatExtraData: this,
        headerStyle: () => ({ width: '50%', textAlign: 'center' }),
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
          md: { width: 80 },
          lg: { width: 80 },
        },
      },

      {
        text: 'Download',
        dataField: 'download',
        sort: true,
        hidden: false,
        formatter: this.downloadFormatter,
        formatExtraData: this,
        headerStyle: () => ({ width: '50%', textAlign: 'center' }),
        responsiveHeaderStyle: {
          xs: { hidden: true },
          sm: { hidden: true },
          md: { width: 110 },
          lg: { width: 110 },
        },
      },
    ];
  }

  handleOnSelect = (row, isSelect) => {
    if (isSelect) {
      this.props.addDatasetById(row.id);
    } else {
      this.props.removeDatasetById(row.id);
    }
    return true;
  };

  handleOnSelectAll = (isSelect, rows) => {
    if (isSelect) {
      return rows.filter((r) => r.id >= 3).map((r) => r.id);
    }
  };

  render() {
    const selectRow = {
      mode: 'checkbox',
      clickToSelect: false,
      selected: this.props.selection.datasetIds,
      onSelectAll: this.handleOnSelectAll,
      onSelect: this.handleOnSelect,
      classes: 'selection-row',
    };

    const expandRow = {
      showExpandColumn: true,
      expanded: this.props.expanded,
      expandColumnPosition: 'right',
      expandHeaderColumnRenderer: ({ isAnyExpands }) => (
        <span style={{ fontSize: 18 }}>
          <Glyphicon glyph={isAnyExpands ? 'zoom-out' : 'zoom-in'} />
        </span>
      ),
      expandColumnRenderer: ({ expanded }) => (
        <Glyphicon glyph={expanded ? 'zoom-out' : 'zoom-in'} />
      ),
      renderer: (dataset) => (
        <DatasetWidget
          dataset={dataset}
          sessionId={this.props.sessionId}
          selection={this.props.selection}
        />
      ),
    };

    return (
      <div style={{ margin: 20 }}>
        <ResponsiveTable
          data={this.props.datasets}
          columns={this.getColumns()}
          expandRow={expandRow}
          selectRow={selectRow}
        />
      </div>
    );
  }
}

DatasetTable.propTypes = {
  datasets: PropTypes.array,
};

export default DatasetTable;
