import React, {Component} from 'react'
import LinearGradient from "react-native-linear-gradient";
import {BackgroundImage} from "../../components/BackgroundImage";
import IconMaterial from "react-native-vector-icons/MaterialCommunityIcons";
import {Text, View, StyleSheet, RefreshControl, Animated, ScrollView} from "react-native";
import moment from "moment";
import IndicatorLoading from "../../components/IndicatorLoading";
import {getHistoryRedeemPoint} from "../../api/UserApi";
import {NavigationEvents} from "react-navigation";

class HistoryRedeem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      isLoading: false,
      month_selected: moment().format('MMMM YYYY'),
      data: []
    }
  }

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

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

  nextMonth = () => {
    this.setState({
      month_selected: moment(this.state.month_selected, 'MMMM YYYY').add(1, 'month').format('MMMM YYYY')
    }, () => {
      this.initData()
    })
  };

  prevMonth = () => {
    this.setState({
      month_selected: moment(this.state.month_selected, 'MMMM YYYY').subtract(1, 'month').format('MMMM YYYY')
    }, () => {
      this.initData()
    })
  };

  render() {
    let discounts = this.state.data;
    return (
      <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
      }}>
        <NavigationEvents
          onDidFocus={() => {
            this.setState({
              isLoading: true,
              refreshing: true
            }, () => {
              this.initData()
            })
          }}
        />
        <BackgroundImage>
          <ScrollView refreshControl={
                        <RefreshControl
                          refreshing={this.state.refreshing}
                          onRefresh={this._onRefresh}
                        />
                      }
                      showsVerticalScrollIndicator={false}
                      scrollEventThrottle={16}
                      // onScroll={Animated.event(
                      //   [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }]
                      // )}
          >
            <View style={styles.monthSelected}>
              <IconMaterial name="chevron-left" color="white" size={30} onPress={() => this.prevMonth()}/>
              <Text style={{color: 'white', fontFamily: 'Prompt-Regular', fontSize: 20, fontWeight: '500'}}>
                {this.state.month_selected}
              </Text>
              <IconMaterial name="chevron-right" color="white" size={30} style={{justifySelf: 'flex-end'}} onPress={() => this.nextMonth()}/>
            </View>
            <View style={{padding: 10, flex: 0.9}}>
              {
                discounts.length > 0 ?
                  discounts.map((discount, index) => (
                    <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#FFA800', '#E46F00']}
                                    style={[styles.pointContain, {marginTop: index > 0 ? 10 : 0}]}>
                      <View style={{ width: '60%', paddingRight: 10 }}>
                        <View>
                          <Text style={[styles.textStyle, {fontSize: 20}]}>
                            {discount.details}
                          </Text>
                          <Text style={[styles.textStyle, {fontSize: 16}]}>
                              Room: {discount.room_no || '-'}
                            </Text>
                        </View>
                      </View>
                      <View style={{width: '35%'}}>
                        <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end'}}>
                          <Text style={[styles.textStyle, {fontSize: 18, fontWeight: '600'}]}>
                             {discount.points} Points 
                          </Text>
                          <IconMaterial name="star-circle-outline" color="white" size={40}/>
                        </View>
                        <Text style={[styles.textStyle, {textAlign: 'right', paddingRight: 5, fontSize: 18}]}>
                          {discount.earn_date ? moment(discount.earn_date, 'YYYY-MM-DD HH:mm:ss').format('DD MMM YYYY') : '-'}
                        </Text>
                      </View>
                    </LinearGradient>
                  ))
                  :  <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', marginHorizontal: 0, marginVertical: 10,padding:16,borderRadius:5,backgroundColor:'white'}}>
                    <Text style={{fontSize: 16, fontFamily: 'Prompt-Regular'}}> History not found. </Text>
                  </View>
              }
            </View>
          </ScrollView>
        </BackgroundImage>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  pointContain: {
    borderRadius: 5,
    paddingVertical: 8,
    paddingHorizontal: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  textStyle: {
    color: 'white',
    fontFamily: 'Prompt-Regular',
    fontWeight: '500'
  },
  monthSelected: {
    flex: 0.1,
    backgroundColor: '#006910',
    height: 50,
    alignItems: 'center',
    flexDirection: 'row',
    paddingHorizontal: 5,
    justifyContent: 'space-between'
  }
})

export default HistoryRedeem
