content: import React from 'react';
  import PropTypes from 'prop-types';
  
  import style from 'PVWStyle/ReactWidgets/SelectionEditorWidget.mcss';
  
  import Ineq from '../../../../../svg/Operations/Ineq.svg';
  import Ineqq from '../../../../../svg/Operations/Ineqq.svg';
  import LegendIcon from '../LegendIcon';
  import NumberFormatter, {
    sciNotationRegExp,
  } from '../../../../Common/Misc/NumberFormatter';
  import SvgIconWidget from '../../SvgIconWidget';
  
  const CHOICE_LABELS = {
    o: Ineq,
    '*': Ineqq,
  };
  
  const NEXT_VALUE = {
    o: '*',
    '*': 'o',
  };
  
  // typical intervalSpec we are rendering as 5 clauses:
  // {
  //   "interval": [
  //     233,
  //     1.7976931348623157e+308
  //   ],
  //   "endpoints": "oo",
  //   "uncertainty": 15
  // }
  
  export default function render(props) {
    const { intervalSpec, fieldName } = props;
    const terms = [
      intervalSpec.interval[0],
      intervalSpec.endpoints.slice(0, 1),
      fieldName,
      intervalSpec.endpoints.slice(1, 2),
      intervalSpec.interval[1],
    ];
    const formatter = new NumberFormatter(3, [
      Number(terms[0]),
      Number(terms[4]),
    ]);
  
    function onChange(e, force = false) {
      if (!e.target.validity.valid) {
        return;
      }
  
      const value = e.target.value;
      const shouldBeNumber = e.target.nodeName === 'INPUT';
      const path = [].concat(props.path, Number(e.target.dataset.path));
  
      if (shouldBeNumber) {
        path.push(!force ? value : Number(formatter.eval(Number(value))));
      } else {
        path.push(value);
      }
  
      props.onChange(path, !force);
    }
  
    function onBlur(e) {
      onChange(e, true);
    }
  
    function onDelete() {
      props.onDelete(props.path);
    }
  
    function toggleIneq(e) {
      let target = e.target;
      while (!target.dataset) {
        target = target.parentNode;
      }
      const idx = Number(target.dataset.path);
      const path = [].concat(props.path, idx, NEXT_VALUE[terms[idx]]);
      props.onChange(path);
    }
  
    return (
      <section className={style.fiveClauseContainer}>
        <input
          className={style.numberInput}
          type="text"
          pattern={sciNotationRegExp}
          data-path="0"
          value={terms[0]}
          onChange={onChange}
          onBlur={onBlur}
        />
        <div
          className={style.activeInequality}
          data-path="1"
          onClick={toggleIneq}
        >
          <SvgIconWidget
            style={{ pointerEvents: 'none' }}
            width="20px"
            height="20px"
            icon={CHOICE_LABELS[terms[1]]}
          />
        </div>
        <div className={style.inequality} title={terms[2]}>
          <LegendIcon
            width="20px"
            height="20px"
            getLegend={props.getLegend}
            name={terms[2]}
          />
        </div>
        <div
          className={style.activeInequality}
          data-path="3"
          onClick={toggleIneq}
        >
          <SvgIconWidget
            style={{ pointerEvents: 'none' }}
            width="20px"
            height="20px"
            icon={CHOICE_LABELS[terms[3]]}
          />
        </div>
        <input
          className={style.numberInput}
          type="text"
          pattern={sciNotationRegExp}
          data-path="4"
          value={terms[4]} // formatter.eval(terms[1])
          onChange={onChange}
          onBlur={onBlur}
        />
        <i className={style.deleteButton} onClick={onDelete} />
      </section>
    );
  }
  
  render.propTypes = {
    getLegend: PropTypes.func.isRequired,
    fieldName: PropTypes.string.isRequired,
    intervalSpec: PropTypes.object.isRequired,
    path: PropTypes.array.isRequired,
    onChange: PropTypes.func.isRequired,
    onDelete: PropTypes.func.isRequired,
  };
  