import React from 'react';
import PropTypes from 'prop-types';
import { Autobind } from 'es-decorators';
import debounce from 'lodash/debounce';

// Components
import InputRange from 'react-input-range';


class SliderTooltip extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: props.options.defaultValue
    };
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.onMouseDown);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.onMouseDown);
  }

  @Autobind
  onMouseDown(e) {
    const clickOutside = this.el && this.el.contains && !this.el.contains(e.target);
    if (clickOutside) {
      this.props.onClose();
    }
  }

  @Autobind
  onChangeComplited(value) {
    this.setState({ value });
    this.props.onChange(value);
  }

  render() {
    const { className, options } = this.props;
    const updateValue = debounce(value => this.setState({ value }), 0);

    return (
      <div className="c-explore-slider-tooltip" ref={(node) => { this.el = node; }}>
        <InputRange
          className={className}
          minValue={options.min}
          maxValue={options.max}
          value={this.state.value}
          step={options.step}
          onChange={value => updateValue(value)}
          onChangeComplete={this.props.onChange}
        />
        <div className="actions-container">
          <button className="c-button -primary" onClick={this.props.onClose}>Done</button>
          <button className="c-button" onClick={() => this.onChangeComplited(options.max)}>Reset</button>
        </div>
      </div>
    );
  }
}

SliderTooltip.propTypes = {
  // Layer group
  className: PropTypes.string,
  options: PropTypes.object,
  // Callback to call when the layer changes with
  // the ID of the dataset and the ID of the layer
  onChange: PropTypes.func.isRequired,
  // Callback to close the tooltip
  onClose: PropTypes.func.isRequired
};

SliderTooltip.defaultProps = {
  min: 0,
  max: 1,
  step: 0.01,
  defaultValue: 1
};

export default SliderTooltip;

@@ -164,42 +164,30 @@
 ort 
-InputRange from 'react-input-range
+Slider from 'rc-slider
 ';%0A%0A
@@ -735,25 +735,16 @@
 onChange
-Complited
 (value) 
@@ -871,24 +871,27 @@
 s.props;%0A   
+ //
  const updat
@@ -1059,18 +1059,14 @@
    %3C
-InputRange
+Slider
 %0A   
@@ -1107,21 +1107,16 @@
      min
-Value
 =%7Boption
@@ -1135,21 +1135,16 @@
      max
-Value
 =%7Boption
@@ -1164,110 +1164,205 @@
     
-value=%7Bthis.state.value%7D%0A          step=%7Boptions.step%7D%0A          onChange=%7Bvalue =%3E updateV
+step=%7Boptions.step%7D%0A          value=%7Bthis.state.value !== null ? this.state.value : options.defaultValue%7D%0A          defaultValue=%7Bthis.state.value !== null ? this.state.v
 alue
-(v
+ : options.defaultV
 alue
-)
 %7D%0A  
@@ -1381,27 +1381,13 @@
 ange
-Complete=%7Bthis.prop
+=%7Bthi
 s.on
@@ -1611,17 +1611,8 @@
 ange
-Complited
 (opt

Add other slider library