import React from 'react';
import PropTypes from 'prop-types';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';

/* Pattern for number */
const numberPattern = /^\d*\.?\d*$/;

/**
* A stateless component for ImageCaurosel for desktop.
* DesktopImageCaurosel provide common functionality of Caurosel
* ImageCaurosel provide the feature:Partial visible image, keyboard controlled,number of images to display can be set,
* height and width can be set.
*/
class DesktopImageCaurosel extends React.Component {
    constructor(props) {
        super(props);
        // Create the ref
        this.backBtn = React.createRef();
        this.nextBtn = React.createRef();
    }

    componentWillUnmount() {
        window.removeEventListener('keyup', this.handleKeyDown);
    }

    handleKeyDown = (event) => {
        let BackBtnDisable = this.backBtn.current.instance.state.disabled;
        let NextBtnDisable = this.nextBtn.current.instance.state.disabled;
        if (event.key === 'ArrowLeft') {
            if (this.state.initialBluredNumber === this.state.bluredImageNumber) {
                if (BackBtnDisable) {
                    this.setState({ doNothing: true });
                }
                else {
                    this.buttonBackOne();
                }
            }
            else {
                this.buttonBackOne();
            }
        }
        if (event.key === 'ArrowRight') {
            if (!NextBtnDisable) {
                this.buttonNextOne();
            }
            else {
                if (this.props.totalSlides === this.state.bluredImageNumber) {
                    this.buttonNextOne();
                }
                else {
                    if (this.state.bluredImageNumber === this.props.totalSlides - (this.state.initialBluredNumber - 1)) {
                        this.setState({ doNothing: true });
                    }
                    else {
                        this.buttonNextOne();
                    }
                }
            }
        }
    }

    state = {
        bluredImageNumber: Math.ceil(this.props.visibleSlides),
        initialBluredNumber: Math.ceil(this.props.visibleSlides)
    }

    buttonNextOne = () => {
        var temp = this.state.bluredImageNumber + 1;
        this.setState({ bluredImageNumber: temp });
        if (this.state.bluredImageNumber === this.props.totalSlides + 1) {
            this.setState({ bluredImageNumber: this.props.totalSlides - this.state.initialBluredNumber + 1 });
        }
    }

    buttonBackOne = () => {
        var temp = this.state.bluredImageNumber - 1;
        this.setState({ bluredImageNumber: temp });
        if (this.state.bluredImageNumber === 0) {
            this.setState({ bluredImageNumber: this.state.initialBluredNumber });
        }
    }

    buttonNext = (event) => {
        window.removeEventListener('keyup', this.handleKeyDown);
        var temp = this.state.bluredImageNumber;
        var k = temp + this.props.step;
        if (k <= this.props.totalSlides + 1) {
            var c = this.props.step;
        } else {
            for (var i = 1; i <= this.props.step; i++) {
                if (temp + i === this.props.totalSlides + 1) {
                    c = i;
                }
            }
        }
        this.setState({ bluredImageNumber: (temp + c) }, () => {
            if (this.state.bluredImageNumber === (this.props.totalSlides + 1)) {
                this.setState({ bluredImageNumber: this.props.totalSlides + 1 - Math.ceil(this.props.visibleSlides) });
            }
        });
    }

    buttonBack = (event) => {
        window.removeEventListener('keyup', this.handleKeyDown);
        var temp = this.state.bluredImageNumber;
        var k = temp - this.props.step;
        if (k >= 0) {
            var c = this.props.step;
        } else {
            for (var i = 1; i <= this.props.step; i++) {
                if (temp - i === 0) {
                    c = i;
                }
            }
        }
        this.setState({ bluredImageNumber: (temp - c) }, () => {
            if (this.state.bluredImageNumber === 0) {
                this.setState({ bluredImageNumber: Math.ceil(this.props.visibleSlides) });
            }
        });
    }

    handleOnFocus = () => {
        window.addEventListener('keyup', this.handleKeyDown);
    }

    handleOnBlure = () => {
        window.removeEventListener('keyup', this.handleKeyDown);
    }

    render() {
        return (<div className={'jp-desktop-image-caurosel' + this.props.parentclassname}>
            <CarouselProvider
                {...this.props}
                className={numberPattern.test(this.props.visibleSlides) ? 'jp-real-number-image' : 'jp-float-number-image'}
                naturalSlideWidth={this.props.naturalSlideWidth}
                naturalSlideHeight={this.props.naturalSlideHeight}
                totalSlides={this.props.totalSlides}
                visibleSlides={this.props.visibleSlides}
                dragEnabled={false}
                step={this.props.step}
            >
                <Slider onFocus={this.handleOnFocus} onBlur={this.handleOnBlure} >
                    {this.props.options.map((img, index) => {
                        return (
                            <Slide key={index}>
                                <img width={this.props.width} height={this.props.height} src={img.src} alt={img.alt} className={!Number.isInteger(this.props.visibleSlides) ? ((index + 1) === this.state.bluredImageNumber ? 'jp-opacity' : 'jp-none') : null} />
                            </Slide>
                        );
                    })
                    }
                </Slider>
                <ButtonBack ref={this.backBtn} className='jp-button-back' onClick={this.buttonBack} />
                <ButtonNext ref={this.nextBtn} className='jp-button-next' onClick={this.buttonNext} />
            </CarouselProvider>
        </div>
        );
    }
}
export default DesktopImageCaurosel;

DesktopImageCaurosel.defaultProps = {
    /**  The natural width of each component. */
    naturalSlideWidth: 100,
    /* The natural height of each component. */
    naturalSlideHeight: 100,
    /* Total number of images in image caurosel */
    totalSlides: 10,
    /* Number of images to display */
    visibleSlides: 4.5,
    /* Number of slides to slide at a time */
    step: 1,
    /* Image width */
    width: 280,
    /* Image height */
    height: 160,
    /** Additional class name */
    parentclassname: ''
};

DesktopImageCaurosel.propTypes = {
    /* The natural width of each component. */
    naturalSlideWidth: PropTypes.number,
    /* The natural height of each component. */
    naturalSlideHeight: PropTypes.number,
    /* Total number of images in image caurosel */
    totalSlides: PropTypes.number,
    /* Number of images to display */
    visibleSlides: PropTypes.number,
    /* Number of slides to slide at a time */
    step: PropTypes.number,
    /* Image array */
    options: PropTypes.array,
    /* Image width */
    width: PropTypes.number,
    /* Image height */
    height: PropTypes.number,
    /* Type of the images to show. Allowed types: banner, hotelImages, single */
    type: PropTypes.oneOf(['banner', 'hotelImages', 'single']),
    /** Class applied to parent container for additional styling  */
    parentclassname: PropTypes.string
};