const React = require('react');
const ReactDOM = require('react-dom');
const Format = require('d3-format');
const Drag = require('d3-drag');
const Selection = require('d3-selection');

class ArrayDynamic extends React.PureComponent {

  componentDidMount() {
    let node;
    try {
      node = ReactDOM.findDOMNode(this);
    } catch(e) {};
    if (!node) {
      return;
    }
    this.drag = Drag.drag().on('drag', () => {
      const dx = Selection.event.dx;
      var { step, value, interval, array, min, max } = this.props;
      min = Math.min(min, 0);
      max = Math.min(max, array.length - 1);
      step = Math.round(step); // Must be an integer
      const newValue = Math.max(Math.min(value + (step || interval) * dx, max), min);
      this.props.updateProps({ value: newValue });
    });
    this.drag(Selection.select(node));
  }

  render() {
    const { format, value, array } = this.props;
    const formatter = Format.format(format);
    return (
      <span className="idyll-dynamic">
        {array[value]}
      </span>
    );
  }
}