import React from 'react';
import PropTypes from 'prop-types';
import Range from 'rc-slider/lib/Range';

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

class RangeSelectorSlider extends React.Component {
    componentDidMount() {
        let page = this.props.page;
        if (page <= 2) {
            page = 2;
        }
        this.setState({ page: page });
    }

    state = {
        minValue: this.props.min,
        maxValue: this.props.max,
        page: this.props.page,
        doNothing:true

    }

    sliderChange = (range) => {
        if (range['0'] > range['1']) {
            this.setState({doNothing: true });
        }
        else {
            if (this.state.minValue !== range['0']) {
                this.props.sliderChange(range);
                
                document.onkeyup = (event) => {
                    if (event.key === 'PageUp') {
                        if (range['0'] >= range['1']) {
                            this.setState({doNothing: true });
                        }
                        else {
                            range['0'] = range['0'] - (this.props.step) * 2;
                            range['0'] = range['0'] + this.props.step * this.state.page;
                            if (range['0'] >= range['1']) {
                                range['0'] = range['1'];
                            }
                        }
                    }
                    else if (event.key === 'PageDown') {
                        range['0'] = range['0'] + (this.props.step) * 2;
                        range['0'] = range['0'] - (this.props.step * this.state.page);
                        if (range['0'] <= this.props.min) {
                            range['0'] = this.props.min;
                        }
                    }
                    this.props.sliderChange(range);
                    this.setState({ minValue: range['0'], maxValue: range['1'] });
                };
            }
            else if (this.state.maxValue !== range['1']) {
                this.props.sliderChange(range);
                document.onkeyup = (event) => {
                    if (event.key === 'PageUp') {
                        range['1'] = range['1'] - (this.props.step * 2);
                        range['1'] = range['1'] + (this.props.step * this.state.page);
                        if (range['1'] >= this.props.max) {
                            range['1'] = this.props.max;
                        }
                    }
                    else if (event.key === 'PageDown') {
                        range['1'] = range['1'] + (this.props.step) * 2;
                        range['1'] = range['1'] - (this.props.step * this.state.page);
                        if (range['1'] <= range['0']) {
                            range['1'] = range['0'];
                        }
                    }
                    this.props.sliderChange(range);
                    this.setState({ minValue: range['0'], maxValue: range['1'] });
                };
            }
        }
    }

    render() {
        return (
            <div className={'jp-range-selector-slider ' + this.props.parentClassName}>
                <Range
                    {...this.props}
                    min={this.props.min}
                    max={this.props.max}
                    marks={this.props.marks}
                    value={this.props.value}
                    onChange={this.sliderChange}
                    allowCross={this.props.allowCross}
                    step={this.props.step}
                />
            </div>
        );
    }

}
export default RangeSelectorSlider;

RangeSelectorSlider.defaultProps = {
    /** object containing key-value pairs.*/
    marks: {
        0: '0',
        30000: {
            style: {
                color: 'red',
            },
            label: 'Rs',
        },
    },
    /** step in which increments/decrements have to be made */
    step: 100,
    /** Minimum Range */
    min: 0,
    /** Maximum Range */
    max: 30000,
    /** Allow Cross */
    allowCross: false,
    /** Value of Range Slider */
    value: [0, 30000],
    /** Additional class name */
    parentClassName: '',
    /** Page Up/Page Down Value **/
    page: 2
};

RangeSelectorSlider.propTypes = {
    /** Minimum Range */
    min: PropTypes.number.isRequired,
    /** Maximum Range */
    max: PropTypes.number.isRequired,
    /** step in which increments/decrements have to be made */
    step: PropTypes.number,
    /** On Range change function */
    sliderChange: PropTypes.func,
    /** object containing key-value pairs.*/
    marks: PropTypes.object,
    /** Value of Range Slider */
    value: PropTypes.array,
    /** Allow Cross  */
    allowCross: PropTypes.bool,
    /** Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string,
    /**Page Up/Page Down Value  **/
    page: PropTypes.number
};