import React from 'react';
import Slider from 'rc-slider';
import PropTypes from 'prop-types';

import 'rc-slider/assets/index.css';

/**
 * A stateful range selector atom. It uses rc-slider library and can receive all props included in the library. 
 */

const Handle = Slider.Handle;

const handle = (props) => {
    delete props.dragging;
    const { value, ...restProps } = props;
    return (
        <Handle value={value} aria-label={value} {...restProps} />
    );
};

handle.propTypes = {
    value: PropTypes.string,
    dragging: PropTypes.bool
};


const RangeSelector = (props) => { 
    return (
        <Slider className="jp-range-selector" handle={handle} {...props} />
    );
};

export default RangeSelector;

RangeSelector.propTypes = {
    /** The minimum value of the slider */
    min: PropTypes.number,
    /** The maximum value of the slider */
    max: PropTypes.number,
    /** Set initial value of slider. */
    defaultValue: PropTypes.number,
    /** Value to be added or subtracted on each step the slider makes. Must be greater than zero, and max - min should be evenly divisible by the step value. When marks is not an empty object, step can be set to null, to make marks as steps. */
    step: PropTypes.number,
    /** If true, handles can't be moved. */
    disabled: PropTypes.bool,
    /** Set current value of slider*/
    value: PropTypes.number,
    /** Event triggered on change of value of slider */
    onChange: PropTypes.func
};

RangeSelector.defaultProps = {
    min: 0,
    max: 100,
    defaultValue: 0,
    step: 1,
    disabled: false
};