import React from 'react';
import PropTypes from 'prop-types';
import { CarouselProvider, Slider, Slide } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';



/**
 * A stateless Common Component for Mobile Image Caurosel. It uses pure-react-carousel .
 */


const MobileImageCaurosel = (props) => {
    return (
        <div className={'jp-mobile-image-caurosel ' + props.parentclassname}>
            <CarouselProvider
                {...props}
                naturalSlideWidth={props.naturalSlideWidth}
                naturalSlideHeight={props.naturalSlideHeight}
                totalSlides={props.totalSlides}
                visibleSlides={props.visibleSlides}
            >
                <Slider>
                    {props.options.map((img, index) => {
                        return (<Slide key={index}>
                            <img width={props.width} height={props.height} src={img.src} alt={img.alt} />
                        </Slide>);
                    })
                    }
                </Slider>
            </CarouselProvider>
        </div>
    );
};
export default MobileImageCaurosel;

MobileImageCaurosel.defaultProps = {
    /** The natural width of each component.  */
    naturalSlideWidth: 20,
    /** The natural height of each component.  */
    naturalSlideHeight: 10,
    /** Total number of images in image caurosel */
    totalSlides: 10,
    /** Number of images to display  */
    visibleSlides: 1,
    /** Image width */
    width: 360,
    /** Image height */
    height: 180,
    /** Image array */
    options: [],
    /* Class applied to parent container for additional styling */
    parentclassname: ''

};

MobileImageCaurosel.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.isRequired,
    /** Number of images to display per slide */
    visibleSlides: PropTypes.number.isRequired,
    /** Image array */
    options: PropTypes.array.isRequired,
    /** Image width */
    width: PropTypes.number,
    /** Image height */
    height: PropTypes.number,
    /* Class applied to parent container for additional styling  */
    parentclassname: PropTypes.string,
};