import React from 'react';
import Slider from 'rc-slider';
import PropTypes from 'prop-types';
import 'rc-slider/assets/index.css';
import InputNumber from 'rc-input-number';

/**
 * A stateless Slider Content for mobile. It uses rc-slider and rc-input-number library and can accept the props used by the library for other additional functionality which library provides.
 */

const SliderContentMobile = (props) => {
    return (
        <div className='jp-slider-container'
            style={
                {
                    width: props.wrapperWidth,
                    margin: props.wrapperMargin
                }}>
            <InputNumber
                className={props.className}
                type='number'
                min={props.min}
                max={props.max}
                value={props.sliderValue}
                step={props.step}
                onChange={props.sliderInputChange}
            />
            <Slider
                className={props.className}
                min={props.min}
                max={props.max}
                value={props.sliderValue}
                step={props.step}
                tooltip={props.isDisplayTooltip}
                onChange={props.sliderChange}
                marks={props.marks} />
        </div>
    );
};

export default SliderContentMobile;

SliderContentMobile.defaultProps = {
    /** Margin of the slider */
    wrappperMargin: 50,
    /** Value of the slider as well as input */
    sliderValue: 500000,
    /** step in which increments/decrements have to be made */
    step: 5000,
    /** Minimum Range */
    min: 5000,
    /** Maximum Range */
    max: 1500000,
    /**Color of the slider */
    color: '#3c91e6',
    /** Tooltip for Slider  */
    isDisplayTooltip: true,
    /** object containing key-value pairs*/
    marks: {
        5000: '5k',
        1500000: '15L'
    }
};
SliderContentMobile.propTypes = {
    /** Width of the slider */
    wrapperWidth: PropTypes.number,
    /** Margin of the slider */
    wrapperMargin: PropTypes.number,
    /** For applying style */
    className: PropTypes.string,
    /** Minimum Range */
    min: PropTypes.number.isRequired,
    /** Maximum Range */
    max: PropTypes.number.isRequired,
    /** Value of the slider as well as input */
    sliderValue: PropTypes.number,
    /** step in which increments/decrements have to be made */
    step: PropTypes.number,
    /** Tooltip for Slider  */
    isDisplayTooltip: PropTypes.bool,
    /** On Range change function */
    sliderChange: PropTypes.func,
    /**On Input change function */
    sliderInputChange: PropTypes.func,
    /** object containing key-value pairs.*/
    marks: PropTypes.object
};