import React, {Component} from 'react'
import {Animated, FlatList, RefreshControl, ScrollView, TouchableOpacity, View} from "react-native";
import LinearGradient from "react-native-linear-gradient";
import {BackgroundImage} from "../../components/BackgroundImage";
import Text from "../../components/Text";
import Image from 'react-native-fast-image'
import IndicatorLoading from "../../components/IndicatorLoading";
import {NavigationEvents} from "react-navigation";
import {getListMyReward} from "../../api/UserApi";
import moment from "moment";
import { t } from '../../utils/i18n';

class MyRewards extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 1,
      refreshing: false,
      isLoading: false,
      data: []
    }
  }

  setIndex = (index) => {
    this.setState({
      index
    }, () => {
      this.initData()
    })
  };

  initData = () => {
    this.setState({
      isLoading: true,
      refreshing: true
    }, () => {
      getListMyReward(this.state.index)
        .then(res => {
          if(res.data){
            this.setState({
              data: res.data.data,
              isLoading: false,
              refreshing: false
            })
          }
        })
    })
  }

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

  _keyExtractor = (item, index) => {
    return 'available_' + index
  };

  renderItem = (item) => (
    <TouchableOpacity
      onPress={() => this.props.navigation.navigate('RewardDetail', {id: item.id, is_my_reward: true, is_history: this.state.index === 2})}
      style={{height: 112, width: '100%', backgroundColor: 'white', borderRadius: 5, flexDirection: 'row', padding: 5, marginBottom: 8}}>
      <View style={{flex: 0.3, borderRadius: 5, marginRight: 5}}>
        <Image source={{uri: item.image_reward ?? ''}} style={{flex: 1}} resizeMode="contain"/>
      </View>
      <View style={{flex: 0.7, flexDirection: 'column', justifyContent: 'space-between'}}>
        <View>
          <Text>{t('event_name')} : {item.loyalty_activity_name ?? ''}</Text>
        </View>
        <View>
          <Text style={{color: '#FF3B30'}}>
            {t('valid_until')} : {item.expired_date ? moment(item.expired_date, 'YYYY-MM-DD').add(543, 'year').format('DD MMMM YYYY') : '-'}
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  );

  render() {
    return (
      <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
      }}>
        <NavigationEvents
          onDidFocus={() => {
            this.setState({
              isLoading: true,
              refreshing: true,
              index: this.props.navigation.getParam('index', 1)
            }, () => {
              this.initData()
            })
          }}
        />
        <BackgroundImage>
          <View style={{flexDirection: 'row', height: 48}}>
            <TouchableOpacity style={this.state.index === 1 ? {borderBottomColor: 'white', borderBottomWidth: 5, flex: 1} : {flex: 1}}
                              onPress={() =>this.setIndex(1)}
            >
              <LinearGradient style={{flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'center'}}
                              colors={this.state.index === 1 ? ['#2C7C0B', '#3AA40C'] : ['#3AA40C', '#3AA40C']}>
                <Text style={{color: 'white'}}>Available</Text>
              </LinearGradient>
            </TouchableOpacity>
            <TouchableOpacity style={this.state.index === 2 ? {borderBottomColor: 'white', borderBottomWidth: 5, flex: 1} : {flex: 1}}
                              onPress={() => this.setIndex(2)}
            >
              <LinearGradient  style={{flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'center'}}
                              colors={this.state.index === 2 ? ['#2C7C0B', '#3AA40C'] : ['#3AA40C', '#3AA40C']}>
                <Text style={{color: 'white'}}>History</Text>
              </LinearGradient>
            </TouchableOpacity>
          </View>
          <View style={{paddingHorizontal: 10, paddingVertical: 15, flex: 1, flexDirection: 'column'}}>
            <ScrollView refreshControl={
                          <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                          />
                        }
                        showsVerticalScrollIndicator={false}
                        scrollEventThrottle={16}
                        // onScroll={Animated.event(
                        //   [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }]
                        // )}
            >
              <FlatList
                data={this.state.data}
                extraData={this.state.data}
                renderItem={({ item }) => this.renderItem(item)}
                showsHorizontalScrollIndicator={false}
                pagingEnabled={true}
                keyExtractor={this._keyExtractor}
                ListEmptyComponent={() =>
                  <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', margin: 16,padding:16,borderRadius:5,backgroundColor:'white'}}>
                    <Text style={{fontSize: 16}}> Reward not found. </Text>
                  </View>
                }
              />
            </ScrollView>
          </View>
        </BackgroundImage>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </LinearGradient>
    );
  }
}

export default MyRewards
