import React from 'react'
import AliceCarousel from 'react-alice-carousel';
import PropTypes from 'prop-types';

/**
 * A statefull component of Mobile to create Mobile Image With Text Carousel  atom 
 */
class MobileTextAndImageCarousel2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      img: this.props.img, text: this.props.text.map((i) => (i.map((fact,index)=>{return(<span key={index} className={fact.isBold?'jp-bold':''}>{fact.text1}</span>);})))
    }

  }
  render() {
    return (
      <div className={'jp-mobile-text-image-carousel-1 ' + this.props.parentClassName}>
        <AliceCarousel
          responsive={this.responsive}
          FadeOut animation={true}
          autoPlayInterval={this.props.timer}
          stagePadding={this.state.padding}
          autoPlayDirection="ltr"
          dotsDisabled={true}
          autoPlay={true}
          mouseDragEnabled={false}
          buttonsDisabled={true}
          playButtonEnabled={false}
          disableAutoPlayOnAction={true}
          stopAutoPlayOnHover={false}
        >
          {this.state.img.map((fact, index) => {
            return (
              <div key={index}>
                <img src={fact} height={this.props.height} width={this.props.width} alt='img'  className='jp-inner' key={index}/>
              </div>
            );
          })}
        </AliceCarousel>
        <div className='jp-logo'>
          <img src={this.props.jpLogo} height={this.props.logoHeight} width={this.props.logoWidth} alt='img' />
        </div>
        <AliceCarousel
          items={this.state.text.map((fact,index)=>{return(<div key={index}>{fact}</div>)})}
          responsive={this.responsive}
          autoPlayInterval={this.props.timer}
          autoPlayDirection="ltr"
          dotsDisabled={true}
          autoPlay={true}
          fadeOutAnimation={false}
          mouseDragEnabled={false}
          buttonsDisabled={true}
          playButtonEnabled={false}
          disableAutoPlayOnAction={true}
        />
      </div>
    )
  }
}
export default MobileTextAndImageCarousel2;

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

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