import React, { Component } from 'react';
import { View, FlatList, TouchableOpacity, Dimensions, RefreshControl } from 'react-native';
import Image from 'react-native-fast-image'
import ImageBackground from 'react-native-fast-image'
import Text from '../../components/Text';
import Color from '../../color';
import { getProductList } from '../../api/UserApi'
import { connect } from 'react-redux'
import { NavigationEvents } from 'react-navigation'
import IndicatorLoading from '../../components/IndicatorLoading';
import { t } from 'src/utils/i18n'
const { height, width } = Dimensions.get('window')
const calWidth = (width / 2) - 70

class RewardScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      isLoading: false,
      product_list:[]
    };
    this.onRefresh = this.onRefresh.bind(this)
  }

  componentDidMount(){
    this.setState({isLoading: true})
    this.getProductData()
  };

  getProductData(){
    getProductList()
    .then(res => {
      console.log('response -------------------> ',res.data);
      this.setState({
        product_list: res.data.data,
        isLoading: false,
        refreshing: false
      })
    })
  }

  renderItem = (item) => {
    return <View style={{ height: 224,width: '48%',backgroundColor:'#FFFFFF40',margin:5,padding:10,
                      borderRadius:5,borderColor:'white',borderWidth:1,justifyContent:'center',alignItems:'center'}}>
      <View style={{width: '100%',height: 104, backgroundColor:'white',borderRadius:5}}>
        <Image source={{uri: item.image_url}} defaultSource={require('../../../assets/images/logo_2.png')} style={{flex:1,height: 104,width:'100%'}} resizeMode={'contain'}/>
      </View>
      <View style={{marginTop:10, alignItems:'center'}}>
        <Text style={{fontSize: 14,color: 'white'}}>{item.name}</Text>
        {/* <Text style={{fontSize: 16,color: 'white'}}>500 บาท</Text> */}
      </View>
      <TouchableOpacity style={{height: 32,paddingHorizontal:15,backgroundColor:Color.button_blue,marginTop:5,justifyContent:'center',alignItems:'center',borderRadius:5}}
                    onPress={() => {this.props.navigation.navigate('RewardDetailScreen',{product_id: item.id})}}>
        <Text style={{color:'white',fontSize:16}}> {t('detail')} </Text>
      </TouchableOpacity>
    </View>
  }

  _keyExtractor = (item, index) => 'product_'+index

  onRefresh(){
    this.setState({refreshing: true})
    this.getProductData()
  }

  render() {
    return (
      <View>
        <ImageBackground source={require('../../../assets/images/tree2.png')} style={{width: '100%', height: '100%', backgroundColor:'#2C7C0B'}}>
          <View style={{flex:1,padding:10}}>
            <FlatList
              extraData={this.state}
              refreshControl={
                <RefreshControl
                  refreshing={this.state.refreshing}
                  onRefresh={this.onRefresh.bind(this)}
                />
              }
              data={this.state.product_list}
              renderItem={({ item }) => this.renderItem(item)}
              showsVerticalScrollIndicator={false}
              keyExtractor={this._keyExtractor}
              numColumns={2}
              ListEmptyComponent={() =>
                <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', margin: 16,padding:16,borderRadius:5,backgroundColor:'white'}}>
                  <Text style={{fontSize: 16}}>{t('no_items')}</Text>
                </View>
              }
            />
          </View>
        </ImageBackground>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </View>
    );
  }
}

const mapDisPatchToProps = state => {
  return state.app
}

export default connect(mapDisPatchToProps)(RewardScreen)
