import moment from 'moment';
import React, {Component} from 'react';
import { View, Text, StyleSheet, FlatList, ScrollView, RefreshControl } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import IconMaterial from 'react-native-vector-icons/MaterialCommunityIcons'
import { NavigationEvents } from 'react-navigation';
import { getLevelMembership, getPointExpire } from '../../api/UserApi';
import { BackgroundImage } from '../../components/BackgroundImage';
import IndicatorLoading from '../../components/IndicatorLoading';
import { t } from '../../utils/i18n';

class MemberPoinExpire extends Component {
  constructor(props){
    super(props);
    this.state = {
      member_data: null,
      isLoading: false,
      refreshing: false,
      point_expire_list: []
    }
  }

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

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

  async getPoinExpire () {
    return await getPointExpire()
    .then(res => {
      if(res.data && res.data.success){
        this.setState({
          point_expire_list: res.data.data
        })
      }
    })
  }

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

  render() {
    return (
      <View style={{flex: 1}}>
        <NavigationEvents
          onDidFocus={() => {
            this.initData()
          }}
        />
        <LinearGradient colors={['#FFA800', '#E46F00']} start={{x: 0, y: 0}} end={{x: 1, y: 0}} style={{ flex: 0.2, padding: 16 }}>
          <View style={{padding: 16, backgroundColor: 'white', borderRadius: 8, flexDirection: 'column', alignItems: 'center'}}>
            <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
              <IconMaterial name="rhombus" size={30} color="#DA7A16"/>
              <Text style={[styles.mainText, {paddingLeft: 5, fontWeight: '500', fontSize: 30, color: '#DA7A16'}]}>{this.state.member_data && this.state.member_data.user_level}</Text> 
            </View>

            <View style={[styles.pointBox]}>
                <IconMaterial name="star-circle-outline" size={32} color="#DA7A16"/>
                <Text style={[styles.mainText, {fontSize: 32, paddingLeft: 5, fontWeight: '600', color: '#DA7A16'}]}>
                  {this.state.member_data && this.state.member_data.point_balance ? parseFloat(this.state.member_data.point_balance).toLocaleString() : 0 }<Text style={[styles.mainText, {fontSize: 14, fontWeight: 'normal', color: '#DA7A16', fontWeight: '500'}]}> Points</Text>
                </Text>
            </View>
          </View>
        </LinearGradient>

        <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
              width: null,
              height: null,
              resizeMode: 'cover',
              flex: 1
            }}>
                <BackgroundImage>
                  <View style={{padding: 16, flex: 1}}>
                      <Text style={[styles.mainText, {fontSize: 18}]}>{t('point_expire')}</Text>
                      <View style={{backgroundColor: 'white', padding: 18, borderRadius: 8, marginTop: 5, flex: 0.9}}>
                        <FlatList
                          data={this.state.point_expire_list}
                          renderItem={({ item, index }) => (
                           <View>
                              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                <View style={{
                                  width: 10,
                                  height: 10,
                                  backgroundColor: moment(item.expired_date).isSameOrAfter(moment()) ? '#FF2D55' : 'rgba(0, 0, 0, 0.25)',
                                  borderRadius: 5,
                                  marginRight: 10
                                }}></View>
                                <Text style={[styles.mainText, {color: moment(item.expired_date).isSameOrAfter(moment()) ? '#FF2D55' : '#000000', fontSize: 18}]}>{item.balance} {t('point')}</Text>
                              </View>
                              <View style={{flexDirection: 'row', marginLeft: 4, height: 30}}>
                                {
                                  index !== this.state.point_expire_list.length - 1 &&
                                  <View style={[styles.borderVerticalDash]}></View>
                                }
                                <Text style={[styles.mainText, {color: moment(item.expired_date).isSameOrAfter(moment()) ? '#FF2D55' : '#5C6873', fontSize: 15, marginLeft: 15}]}>{t('expire_on')} {moment(item.expired_date).add(543, 'year').format('DD MMM YY')}</Text>
                              </View>
                           </View>
                          )}
                          pagingEnabled={true}
                          extraData={this.state}
                          keyExtractor={(item, index) => 'expire_' + index}
                          refreshControl={
                            <RefreshControl
                              refreshing={this.state.refreshing}
                              onRefresh={this._onRefresh}
                            />
                          }
                          ListEmptyComponent={
                            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', margin: 16,padding:16,borderRadius:5,backgroundColor:'white'}}>
                              <Text style={[styles.mainText, {fontSize: 16, color: 'grey'}]}> {t('not_found_point_expire')} </Text>
                            </View>
                          }
                        />
                      </View>
                  </View>
                </BackgroundImage>
              <IndicatorLoading loadingVisible={this.state.isLoading} />
        </LinearGradient>       
      </View>
    )
  };
}

const styles = StyleSheet.create({
  mainText: {
    fontFamily: 'Prompt-Regular',
    fontSize: 16,
    color: 'white'
  },
  pointBox: {
    flexDirection: 'row',
    backgroundColor: '#FFEED6',
    borderRadius: 100,
    alignItems: 'center',
    paddingHorizontal: 8,
    justifyContent: 'center',
    marginTop: 10
  },
  borderVerticalDash: {
    borderStyle: 'dashed',
    borderWidth: 1,
    borderColor: 'rgba(0, 0, 0, 0.25)',
    marginVertical: -8
  }
})

export default MemberPoinExpire;