import React from 'react';
import PropTypes from 'prop-types';
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';


/** 
 * A stateless component for ImageCaurosel for desktop.
 * ImageCaurosel 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.
*/
const ImageCaurosel = (props) => {

    return (
        <div>
            <Carousel
                arrows={props.arrows}
                infinite={props.infinite}
                keyBoardControl={props.keyBoardControl}
                partialVisbile={props.partialVisbile}
                responsive={{
                    desktop: {
                        breakpoint: {
                            max: 3000,
                            min: 1024
                        },
                        items: props.itemsNumber,
                        paritialVisibilityGutter: 35
                    },
                }}
                slidesToSlide={props.slidesToSlide}
                centerMode={props.centerMode}
            >
                {props.imgOp.map((img,index) => {
                    return <img width={props.imgWidth} height={props.imgHeight} key={index} src={img.src} alt={img.alt} />;
                })
                }
            </Carousel>
        </div>
    );
};
export default ImageCaurosel;

ImageCaurosel.defaultProps = {
    /** Show or hide arrows in image caurosel */
    arrows: false,
    /** Should the Image caurosel be infinite or not */
    infinite: false,
    /** Swipable by keyboard or not */
    keyBoardControl: false,
    /** Show partial image or not */
    partialVisbile: false,
    /** Number of slides to slide at a time */
    slidesToSlide: 1,
    /** Image array */
    imgOp: PropTypes.array,
    /** Number of images to be displayed in image caurosel */
    itemsNumber: PropTypes.number,
    /** Image width */
    imgWidth:PropTypes.number,
    /** Image height */
    imgHeight:PropTypes.number,
    /** Keep image in center */
    centerMode:PropTypes.bool,
};

ImageCaurosel.propTypes = {
    /** Show or hide arrows in image caurosel */
    arrows: PropTypes.bool,
    /** Should the Image caurosel be infinite or not */
    infinite: PropTypes.bool,
    /** Swipable by keyboard or not */
    keyBoardControl: PropTypes.bool,
    /** Show partial image or not */
    partialVisbile: PropTypes.bool,
    /** Number of slides to slide at a time */
    slidesToSlide: PropTypes.number,
    /** Image array */
    imgOp: PropTypes.array,
    /** Number of images to be displayed in image caurosel */
    itemsNumber: PropTypes.number,
    /** Image width */
    imgWidth:PropTypes.number,
    /** Image height */
    imgHeight:PropTypes.number,
    /** Keep image in center */
    centerMode:PropTypes.bool,
};