import React from 'react';
import {
  getDatasetParameterByName,
  getDatasetParameterByPrefixName,
} from '../../helpers';
import ParameterTableWidget from './ParameterTableWidget';

class InstrumentDetectorWidget extends React.Component {
  getDetectorWidget(index) {
    const parameters = getDatasetParameterByPrefixName(
      this.props.dataset,
      `InstrumentDetector0${index}`
    );
    if (parameters) {
      if (parameters.length > 0) {
        return (
          <DetectorWidget
            detectorIndex={index}
            name={getDatasetParameterByName(
              this.props.dataset,
              `InstrumentDetector0${index}_name`
            )}
            positionersValue={getDatasetParameterByName(
              this.props.dataset,
              `InstrumentDetector0${index}Positioners_value`
            )}
            positionersName={getDatasetParameterByName(
              this.props.dataset,
              `InstrumentDetector0${index}Positioners_name`
            )}
            positionersRoisValue={getDatasetParameterByName(
              this.props.dataset,
              `InstrumentDetector0${index}PositionersRois_value`
            )}
            positionersRoisName={getDatasetParameterByName(
              this.props.dataset,
              `InstrumentDetector0${index}PositionersRois_name`
            )}
          />
        );
      }
    }
  }

  render() {
    const detectors = [];
    for (let i = 1; i < 10; i++) {
      const detector = this.getDetectorWidget(i);
      if (detector) {
        detectors.push(detector);
      }
    }
    if (detectors.length === 0) {
      return null;
    }
    return (
      <div className="container-fluid">
        <h3>Detectors</h3>
        <div className="row">
          {detectors.map((detector) => (
            <div>{detector}</div>
          ))}
        </div>
      </div>
    );
  }
}

export default InstrumentDetectorWidget;

class DetectorWidget extends React.Component {
  render() {
    return (
      <div className="col-sm-1">
        <ParameterTableWidget
          header={`#${this.props.detectorIndex}${this.props.name}`}
          names={this.props.positionersName}
          values={this.props.positionersValue}
        />
      </div>
    );
  }
}
