import React, {Component} from "react";
import { ImageBackground, View, StyleSheet, Text, TouchableOpacity } from "react-native";
import { payment_detail, removeRentalDiscount } from "../../api/UserApi";
import IndicatorLoading from "../../components/IndicatorLoading";
import IconMaterial from 'react-native-vector-icons/MaterialCommunityIcons'
import { FlatList, NavigationEvents } from "react-navigation";
import { t } from "../../utils/i18n";

class PaymentConfirm extends Component {
  constructor(props){
    super(props);
    this.state = {
      payment_id: null,
      payment: null,
      isLoading: false
    }
  }

  componentDidMount(){
    const payment_id = this.props.navigation.getParam('payment_id');
    const room = this.props.navigation.getParam('room');


    this.setState({
      room
    })

    if(payment_id){
      this.setState({
        payment_id
      }, () => {
        this.getPayment()
      })
    }
  }

  getPayment = () => {
    this.setState({
      isLoading: true
    }, () => {
      payment_detail(this.state.payment_id)
      .then(res => {
        if(res.data && res.data.success){
          this.setState({
            payment: res.data,
            isLoading: false
          })
        }else {
          this.setState({
            isLoading: false
          })
        }
      })
    })
  }

  renderItem = (item) => {
    return (
      <View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8}}>
        <Text style={[styles.mainText, {color: 'black'}]}>{item.cost_name}</Text>
        <Text style={[styles.mainText, {color: '#7CBB33', fontWeight: '500'}]}>{parseFloat(item.total).toLocaleString()} {t('baht')}</Text>
      </View>
    )
  }

  removeCoupon = () => {
    this.setState({
      isLoading: true
    }, () => {
      removeRentalDiscount(this.state.payment.coupon.id, this.state.payment_id)
        .then(res => {
          if(res.data && res.data.success){
            this.setState({
              payment_id: res.data.payment_id
            }, () => {
              this.getPayment()
              this.setState({
                isLoading: false
              })
            })
          }else {
            this.setState({
              isLoading: false
            })
          }
        })
    })
  }

  render(){
    return (
      <ImageBackground source={require('../../../assets/images/tree2.png')} style={styles.ImageBackground}>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
        <NavigationEvents
          onDidFocus={() => {
            this.setState({
              isLoading: true
            }, () => {
              this.getPayment()
            })
          }}
        />
        <View style={{padding: 16, flex: 0.9}}>
          <View style={styles.detialContainer}>
            <View style={styles.borderBottom}>
              <Text style={[styles.mainText, {fontSize: 18, textAlign: 'center'}]}>{t('payment_detail')}</Text>
              {
                this.state.payment && this.state.payment.detail.length > 0 &&
                  <Text style={[styles.mainText, {fontSize: 14, textAlign: 'center'}]}>
                    {t('room')} {this.state.room ? this.state.room : ''}
                  </Text>
              }              
            </View>

            <View style={styles.borderBottom}>
              <View style={{flexDirection: 'row', display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8}}>
                <Text style={[styles.mainText, {color: '#269A21'}]}>{t('list_unit')}</Text>
                <Text style={[styles.mainText, {color: '#269A21'}]}>{t('amount')}</Text>
              </View>

              {
                this.state.payment && this.state.payment.detail && this.state.payment.detail.length > 0 &&
                <FlatList
                  data={this.state.payment.detail}
                  renderItem={({ item }) => this.renderItem(item)}
                  pagingEnabled={true}
                  extraData={this.state}
                  keyExtractor={this._keyExtractor}
                />
              } 
            </View>

            <View style={{flexDirection: 'row', justifyContent: 'flex-end', marginTop: 10, paddingHorizontal: 10}}>
              <Text style={[styles.mainText, {textAlign: 'right',}]}>{t('total')}</Text>
              <Text style={[styles.mainText, {fontWeight: '500', paddingLeft: 10}]}>
                {this.state.payment && this.state.payment.total_cost ? parseFloat(this.state.payment.total_cost).toLocaleString() : 0} {t('baht')}
              </Text>
            </View>

            <View style={[styles.useCoupon]}>
              <Text style={[styles.mainText, {fontSize: 16}]}>{t('use_coupon')} </Text>
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Text style={[styles.mainText, {fontSize: 16, marginRight: 5}]}>
                  { 
                    this.state.payment && this.state.payment.coupon && this.state.payment.coupon.value ? this.state.payment.coupon.value : 0
                  } {t('baht')}
                </Text>
                <TouchableOpacity onPress={() => this.removeCoupon()}>
                  <IconMaterial name="close-circle-outline" size={18} color="#FF2D55"/>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>

        <View style={{padding: 16, flex: 0.1}}>
          <TouchableOpacity style={{backgroundColor: '#145EB3', paddingVertical: 12, borderRadius: 5}}
                            onPress={() => this.props.navigation.navigate('Payment', {payment_id: this.state.payment_id })}
          >
            <Text style={{color: 'white', textAlign: 'center', fontFamily: 'Prompt-Regular'}}>{t('confirm_pay')}</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    )
  }
}

const styles = StyleSheet.create({
  ImageBackground: {
    backgroundColor:'#EEFFD7',
    flex: 1
  },
  detialContainer: {
    backgroundColor: 'white',
    borderRadius: 5,
    padding: 15
  },
  borderBottom: {
    borderBottomWidth: 1,
    borderColor: '#EAEAF4',
    padding: 10
  },
  mainText: {
    color: '#00420A',
    fontFamily: 'Prompt-Regular'
  },
  useCoupon: {
    marginTop: 10,
    backgroundColor: '#E6FFC2', 
    paddingHorizontal: 10,
    paddingVertical: 10, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center'
  }
})

export default PaymentConfirm;