import React, { Component } from 'react'
import {
    StyleSheet,
    View,
    Image,
    Text } from 'react-native'
import Swiper from 'react-native-swiper'
import { connect } from 'react-redux'
import { fetchBanners } from '../actions'


const styles = StyleSheet.create({
    slide1: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#9DD6EB',
    },
    slide2: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#97CAE5',
    },
    slide3: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#92BBD9',
    },
    text: {
      color: '#fff',
      fontSize: 30,
      fontWeight: 'bold',
    }
})



class Banners extends Component {
    componentDidMount(){
        this.props.dispatch(fetchBanners())
    }

    render(){
        return (
            <Swiper style={{ flex: 1 }} showsButtons={true}>
                {
                    !this.props.isFetchingBanners &&
                    this.props.data_banners.length > 0 &&
                    this.props.data_banners.map((data, index) => (
                        <View style={styles.slide1} key={index} >
                            <Image
                                style={{ height: '100%', width: '100%' }}
                                source={{ uri: data.image }} />
                        </View>
                    ))
                }
            </Swiper>
        )
    }
}


const mapStateToProps = (state) => {
    return {
        isFetchingBanners: state.banners.isFetching,
        data_banners: state.banners.items
    }
}

export default connect(mapStateToProps)(Banners)