import React, { Component } from 'react';
import PropTypes from 'prop-types';

/**
 * A statefull component of Mobile to create Mobile Image With Text Carousel  atom 
 */

class MobileTextAndImageCarousel extends Component {
    constructor(props) {
        super(props);

        this.state = { number: 1 }
    }
    componentDidMount() {
        this.interval = setInterval(() => {
            if (this.state.number === this.props.array.length) {
                this.setState({ number: 1 })
            } else {
                this.setState({ number: this.state.number + 1 });
            }
        }, this.props.timer);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }
    render() {
        return (
            <div className={'jp-mobile-text-image-carousel ' + this.props.parentClassName}>{
                <div className='jp-maindiv'>{
                    this.props.array.map((fact, index) => {
                        return (
                            <img src={fact.label === this.state.number ? fact.img : null} height={fact.label === this.state.number ? this.props.height : null} width={fact.label === this.state.number ? this.props.width : null} className={fact.label === this.state.number ? 'jp-inner' : null} alt={fact.label === this.state.number ? 'img' : ''} key={index} />
                        );
                    })}
                </div>}
                <div className='jp-logo'>
                    <img src={this.props.jpLogo} height={this.props.logoHeight} width={this.props.logoWidth} alt='img' />
                </div>
                {
                    this.props.array.map((fact, index) => {
                        return (
                            <div key={index}>
                                <p key={index}>{fact.label === this.state.number ? fact.text.map((fact1,index)=>{return(<span key={index} className={fact1.isBold?'jp-bold':'jp-normal'}>{fact1.text1}</span>);}): null}</p>
                            </div>
                        );
                    })}

            </div>

        );
    }
}
export default MobileTextAndImageCarousel;


MobileTextAndImageCarousel.defaultProps = {
    timer: 3000,
    parentClassName: ''
};

MobileTextAndImageCarousel.propTypes = {
    /** Timer for move slider in msec*/
    timer: PropTypes.number,
    /** Array contain object of image and text*/
    array: PropTypes.array,
    /** Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string
}