import * as React from 'react';
import { SafeAreaView, View, Text, ScrollView, Image, TouchableOpacity, Platform } from 'react-native';
import { connect } from "react-redux";
import { saveUserInfo } from "../../../redux/actions/AppUserInfoActions";
import NetInfo from "../../../components/netstatus"
import Assets from '../../../components/assets.manager.js';
import Theme from '../../../components/theme.style.js';
import Elements from '../../../components/elements.js';
import CustomIcon from '../../../components/icons.js';
import { Avatar, Divider } from 'react-native-elements';
import DB from '../../../components/storage/';


class MyProfile extends React.PureComponent {

  constructor(props) {
    super(props)
  }

  state = {
    connected: false,
    loading: false,
    userProfile: (this.props.userinfo != undefined && this.props.userinfo.data != undefined) ? this.props.userinfo.data : null,
    session: null
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  init = () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected){
        this.loadUserProfile()
      }else{
        Elements.nointernet2()
      }
    })
  }

  loadUserProfile = async () => {
    if(this.props.userinfo == undefined) {
      const SESSION = await DB.session()
      this.setState({ connected: true, loading: true, session: SESSION })
      try{
        this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(res => {
          this.setState({ userProfile: res.data, loading: false })
          DB.updateProfile(res, function(){}, function(error){})
        })
        .catch(error => this.setState({ loading: false }))
      }catch(error){
        this.setState({ loading: false })
      }
    } else {
      this.setState({
        connected: true,
        userProfile: this.props.userinfo.data,
        loading: false
      })
    }
  }

  getData = (key) => {
    return this.state.userProfile != null ? this.state.userProfile[key] : ""
  }

  getFT = (type) => {
    let types = Assets.fueltypes
    for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
    return ""
  }

  getVT = (type) => {
    let types = Assets.vehicletypes
    for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
    return ""
  }

  onEdit = () => {
    let navigation = this.props.navigation.navigation
    navigation.navigate("EditProfile", {data: this.state.userProfile, onGoBack: (data) => {
      console.log(data)
      this.setState({ userProfile: data, loading: false })
      this.init()
    }})
  }

  onSelectedPaymentCard = (payment_card) => {
    console.log(payment_card)
  }

  renderNoInternetView = () => {
    return (
      <View style={{flex: 1}}>
        <Elements.nointernet 
          message="No internet found. Please check your internet connection." 
          buttonText="Try Again" 
          onPress={() => {
            NetInfo.netstatus(isConnected => {
              if(isConnected){
                this.init()
              }else{
                Elements.nointernet2()
              }
            })
          }}
        />
      </View>
    )
  }

  render() {
    if(!this.state.connected) return this.renderNoInternetView()
    return (
      <SafeAreaView key={this.state.userUpdateCounter} style={{flex: 1}}>
        <Elements.loader visible={this.state.loading} /> 
        <ScrollView style={{flex: 1, backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
          <View style={{flex: 1, alignItems: 'center', width: '100%', padding: 15}}>
            <Avatar rounded source={this.getData("photo") == '' ? Assets.logo.profileHolder : {uri: this.getData("photo")}} size={80} />
            <Text style={{fontSize: 16, fontFamily: 'Arial', fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text, marginTop: 15}}>
              {this.state.userProfile ? Theme.formatter.NAME(this.state.userProfile) : ''}
            </Text>
            <TouchableOpacity onPress={() => this.onEdit()} style={{backgroundColor: Theme.colors.primary, marginTop: 5, padding: 15, borderRadius: 10}}>
              <Text style={{fontFamily: 'Arial', color: '#fff', fontSize: 17}}>Edit Profile</Text>
            </TouchableOpacity>
          </View>
          <View style={{flex: 1}}>
            <View style={{width: '100%'}}>
              <Divider />
              <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
                <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Card Number</Text>
                <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
                  {this.state.userProfile ? Theme.formatter.CN(this.getData("card_number")) : ''}
                </Text>
              </View>
            </View>
            <View style={{width: '100%'}}>
              <Divider />
              <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
                <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Mobile Number</Text>
                <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
                  +{this.state.userProfile ? this.getData("mobile") : ''}
                </Text>
              </View>
            </View>
            <View style={{width: '100%'}}>
              <Divider />
              <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
                <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Birthday</Text>
                <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
                  {Theme.formatter.DTUI(this.getData("birthdate"))}
                </Text>
              </View>
            </View>
            <View style={{width: '100%'}}>
              <Divider />
              <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
                <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Email</Text>
                <Text numberOfLines={1} style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
                  {this.state.userProfile ? this.getData("email") : ''}
                </Text>
              </View>
            </View>
            <View style={{width: '100%'}}>
              <Divider />
              <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
                <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Address</Text>
                <Text numberOfLines={1} style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
                  {this.state.userProfile ? this.getData("address") : ''}
                </Text>
              </View>
            </View>
            <View style={{width: '100%'}}>
              <Divider />
              <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
                <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Owned Vehicle Type</Text>
                <View style={{flex: 1.5, justifyContent: 'center' }}>
                  <Text style={{fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, textAlign: 'right' }}>
                    {this.state.userProfile ? this.getVT(this.state.userProfile.vo_code) : ''}
                  </Text>
                </View>
              </View>
            </View>
            <View style={{width: '100%'}}>
              <Divider />
              <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
                <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Fuel Type</Text>
                <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.colors.text, alignSelf: 'flex-end', textAlign: 'right'}}>
                  {this.state.userProfile ? this.getFT(this.state.userProfile.fueltype_code) : ''}
                </Text>
              </View>
            </View>
            {/* <View style={{width: '100%'}}>
              <Divider />
              <TouchableOpacity
              onPress={() => this.props.navigation.navigation.navigate('PayatpumpPaymentList', { displaySelectionCard: true })}
              style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginLeft: 16 }}>
                <Image source={Assets.icons.stpunlabeled} style={{ width: 28, height: 28, resizeMode: 'contain' }} />
                <View style={{flex: 1, flexDirection: 'row', paddingVertical: 15, marginHorizontal: 10, alignItems: 'center', justifyContent: 'center'}}>
                  <Text style={{flex: 1, fontFamily: 'Arial', fontSize: 16, color: this.props.app_theme?.theme.dark ? Theme.colors.darkGray : Theme.colors.gray, alignSelf: 'flex-start'}}>Pay at Pump Payment Methods</Text>
                  <CustomIcon.Entypo name={"chevron-thin-right"} color={this.props.app_theme?.theme.colors.text} size={16} />
                </View>
              </TouchableOpacity>
            </View> */}
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    userinfo: state.appUserInfoReducer.userinfo,
    app_theme: state.appThemeReducer.theme
  }
}

const mapDispatchToProps = {
  saveUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(MyProfile)