import React from 'react'
import LinearGradient from "react-native-linear-gradient";
import {BackgroundImage} from "../../components/BackgroundImage";
import {Animated, FlatList, RefreshControl, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import {NavigationEvents} from "react-navigation";
import IconFeather from "react-native-vector-icons/Feather";
import IconMaterial from 'react-native-vector-icons/MaterialCommunityIcons'
import Image from 'react-native-fast-image'
import {getLevelMembership, getListReward, getUserProfile} from "../../api/UserApi";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {appSetUser} from "../../redux/app/action";
import {t} from "../../utils/i18n";
import IndicatorLoading from "../../components/IndicatorLoading";

class RedeemScreen extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isLoading: false,
      refreshing: false,
      cateGoryRewards: [
        {source: require('../../../assets/images/discount_rent.png'), text: t('rental_discount'), id: 1},
        {source: require('../../../assets/images/discount_product.png'), text: t('product_discount'), id: 2},
        {source: require('../../../assets/images/discount_redeem.png'), text: t('redeem_service'), id: 3},
        {source: require('../../../assets/images/discount_coupon.png'), text: t('lucky_draw'), id: 4}
      ],
      allRewards: [],
      point: 0,
      scrollY: '',
      membel_level: ''
    }
  }

  initData = () => {
    this.setState({
      isLoading: true,
      refreshing: true,
    }, () => {
      Promise.all([
        this.getListReward(),
        this.getUserProfile(),
        this.getLevelMember()
      ]).then(() => {
        this.setState({
          isLoading: false,
          refreshing: false
        })
      });
    })
  }

  async getListReward () {
    return await getListReward()
      .then(res => {
        if(res.data){
          this.setState({
            allRewards: res.data.data,
            isLoading: false
          })
        }
      })
  }

  async getUserProfile () {
    return await getUserProfile()
      .then(res => {
        if(res.data && res.ok){
          this.setState({
            point: res.data.point_balance,
          }, () => {
            let user_data = this.props.user;
            user_data = {
              ...user_data,
              point: this.state.point
            }
            this.props.appSetUser(user_data)
          })
        }
      });
  }

  async getLevelMember () {
    return await getLevelMembership()
      .then(res => {
        if(res.data && res.data.success){
          this.setState({
            membel_level: res.data.data && res.data.data.user_level ? res.data.data.user_level : ''
          })
        }
      })
  }

  _onRefresh = () => {
    this.initData()
  }

  renderItemImages = (item) => {
    return (
      <TouchableOpacity style={{ height: 300, width: 200, flex: 1, backgroundColor: 'white', borderRadius: 6, marginRight: 13}}
                        onPress={() => this.props.navigation.navigate('RewardDetail', {id: item.id})}>
        <View style={{flex: 0.7}}>
          <Image source={{uri: item.image_reward ? item.image_reward : ''}} style={{height: '100%'}} resizeMode={'contain'} />
        </View>
        <View style={{flex: 0.3, padding: 8, flexDirection: 'column', justifyContent: 'center'}}>
          <Text style={{fontWeight: '600', fontFamily: 'Prompt-Regular',}}>{item.name}</Text>
          <Text style={{textAlign: 'right', color: '#FF6122', fontFamily: 'Prompt-Regular', fontWeight: '600'}}>{item.points_to_redeem} Point</Text>
        </View>
      </TouchableOpacity>
    )
  }

  _keyExtractorNewHead = (item, index) => 'reward_' + index

  render() {
    let cateGoryRewards = this.state.cateGoryRewards;
    let allRewards = this.state.allRewards;
    return (
      <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
      }}>
        <NavigationEvents
          onDidFocus={() => {
            this.initData()
          }}
        />
        <BackgroundImage>
          <ScrollView contentContainerStyle={styles.contentContainer}
                      refreshControl={
                        <RefreshControl
                          refreshing={this.state.refreshing}
                          onRefresh={this._onRefresh}
                        />
                      }
                      showsVerticalScrollIndicator={false}
                      scrollEventThrottle={16}
                      // onScroll={Animated.event(
                      //   [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }]
                      // )}
          >
            <View style={{flex: 1, padding: 10}}>
              <View style={{flex: 0.1, display: 'flex', flexDirection: 'row'}}>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('HistoryRedeem')} style={{flex: 1, marginRight: 8}}>
                  <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#FFA800', '#E46F00']} style={styles.pointContain}>
                    <View style={{ flex: 0.4}}>
                      <IconMaterial name="star-circle-outline" color="white" size={56}/>
                    </View>
                    <View style={{ flex: 0.6 }}>
                        <TouchableOpacity style={[styles.membershipLevelBox]} onPress={() => this.props.navigation.navigate('MembershipLevelDetail')}>
                          <IconMaterial name="rhombus" size={16} color="#DA7A16"/>
                          <Text style={{color: '#DA7A16', fontSize: 16, paddingLeft: 5, fontFamily: 'Prompt-Regular', fontWeight: '500'}}>{this.state.membel_level}</Text>
                        </TouchableOpacity>
                        <View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
                          <Text style={[styles.textPoint, {marginRight: 5, fontSize: 20}]}>{parseFloat(this.state.point).toLocaleString()}</Text>
                          <Text style={{fontSize: 10, paddingBottom: 6, color: 'white', fontFamily: 'Prompt-Regular'}}>Points</Text>
                        </View>
                    </View>
                  </LinearGradient>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('MyRewards')} style={{flex: 1}}>
                  <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#1BCEDF', '#002A57']} style={styles.pointContain}>
                      <IconFeather name="smile" color="white" size={32}/>
                      <Text style={[styles.textPoint, {fontSize: 20}]}>My Rewards</Text>
                  </LinearGradient>
                </TouchableOpacity>
              </View>

              <View style={styles.categoryContain}>
                <Text style={{color: 'white', fontWeight: 'bold', fontSize: 24, fontFamily: 'Prompt-Regular'}}>Category Rewards</Text>
                <View style={{flexDirection: 'row', flex: 1, paddingVertical: 18}}>
                  {
                    cateGoryRewards && cateGoryRewards.map((category, index) => (
                      <TouchableOpacity style={[styles.subCateContain, {marginRight: index === (cateGoryRewards.length -1) ? 0 : 5}]}
                                        onPress={() => this.props.navigation.navigate('AllRewards', {id: category.id})}
                                        key={`reward_${category.id}_${index}`}
                      >
                        <Image source={category.source} style={{height: 56}} resizeMode={'contain'}/>
                        <View style={styles.textDiscountContain}>
                          <Text style={styles.textDiscount}>{category.text}</Text>
                        </View>
                      </TouchableOpacity>
                    ))
                  }
                </View>
              </View>
              <View style={{flex: 0.6}}>
                <View style={{flexDirection: 'row', justifyContent: 'space-between', marginVertical: 15, alignItems: 'flex-end'}}>
                  <Text style={styles.textPoint}>All Rewards</Text>
                  {
                    allRewards && allRewards.length > 1 &&
                      <TouchableOpacity onPress={() => this.props.navigation.navigate('AllRewards')}>
                        <Text style={{fontSize: 18, color: 'white', fontWeight: '500', fontFamily: 'Prompt-Regular'}}>See More ></Text>
                      </TouchableOpacity>
                  }
                </View>
                {
                  allRewards && allRewards.length > 0
                  ? <View style={{flex: 1, flexDirection: 'row'}}>
                      <FlatList
                        data={allRewards}
                        renderItem={({ item }) => this.renderItemImages(item)}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                        keyExtractor={this._keyExtractorNewHead}
                        initialNumToRender={2}
                        extraData={allRewards}
                        // onScroll={this._onCarouselScroll}
                      />
                    </View>
                    :  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', margin: 0,padding:16,borderRadius:5,backgroundColor:'white'}}>
                      <Text style={{fontSize: 16, textAlign: 'center', fontFamily: 'Prompt-Regular'}}> Rewards not found. </Text>
                    </View>
                }

              </View>
            </View>
          </ScrollView>
        </BackgroundImage>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  contentContainer: {
    paddingVertical: 0,
  },
  pointContain: {
    paddingHorizontal: 7,
    flex: 1,
    borderRadius: 5,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  textPoint: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
    fontFamily: 'Prompt-Regular',
  },
  categoryContain: {
    flex: 0.3,
    backgroundColor: '#00420A',
    padding: 10,
    marginTop: 8,
    borderRadius: 6
  },
  subCateContain: {
    flex: 1
  },
  textDiscount: {
    color: 'white',
    fontWeight: '600',
    fontSize: 10.5,
    width: '100%',
    textAlign: 'center',
    fontFamily: 'Prompt-Regular'
  },
  textDiscountContain: {
    backgroundColor: '#318F00',
    paddingVertical: 5,
    paddingHorizontal: 5,
    borderRadius: 50,
    marginTop: -5
  },
  membershipLevelBox: {
    backgroundColor: 'white',
    paddingHorizontal: 5,
    paddingVertical: 5,
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

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

const propSet = dispatch => bindActionCreators({
  appSetUser,
}, dispatch)

export default connect(mapDisPatchToProps, propSet)(RedeemScreen)