import * as React from 'react';
import DB, {session} from '../../components/storage/';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  Alert,
} from 'react-native';
import { Image as NBImage } from 'native-base';
import { 
  savePlainUserInfo, 
  saveUserInfo
} from "../../redux/actions/AppUserInfoActions";
import { connect } from "react-redux";
import { Divider } from 'react-native-elements';
import { openModal } from '../../redux/actions/AlertActions';
import NetInfo from "../../components/netstatus";
import CustomHeader from '../../components/header.js';
import Assets from '../../components/assets.manager.js';
import Elements from '../../components/elements.js';
import Theme from '../../components/theme.style.js';
import Icon from '../../components/icons.js';
import CustomSafeArea from '../../components/safeArea.component';

class About extends React.PureComponent {

  constructor(props) {
    super(props)
  }

  state = {
    connected: false,
    data: null,
    accounts: [], //1, 2, 3, 4
    loading: false,
  }

  componentDidMount() {
    this.initData()
  }

  componentWillUnmount() {

  }

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

  init = async () => {
    let userdata = await DB.profile()
    let accounts = await DB.accounts()
    console.log("ACCOUNTS ===>", userdata, accounts)
    this.setState({ accounts: accounts, data: userdata.data, connected: true, session })
  };

  switchAccount = async (account, index) => {
    this.props.openModal({
      open: true,
      title: "Account",
      body: "Do you want to switch account?",
      yesCB: async () => {
        this.setState({ loading: true })
        let process = await DB.switchaccount(index, account.data.card_number)
        if(process == true){
          setTimeout(() => {
            this.setState({ loading: false })
            this.props.savePlainUserInfo(account).then(res => {
              DB.updateProfile(res, function(){}, function(error){})
            })
  
            this.props.openModal({
              open: true,
              title: "Account",
              body: "Successfully switched to account",
              yesButtonOnly: true,
              yesText: "Okay",
              yesCB: () => this.proceedToSwitch(),
              theme: this.props.app_theme
            })
          }, 1000)
        } else {
          Alert.alert("Error", "Invalid switching account")
        }
      },
      theme: this.props.app_theme
    })
  }

  removeAccount = (account) => {
    Alert.alert(
      'Remove this Account?',
      'Do you want to remove this account?',
      [
        {
          text: 'Cancel',
          style: 'cancel',
        },
        {
          text: 'OK',
          onPress: async () => {
            DB.removeAccount(account, () => {
              let filteredItems = this.state.accounts.filter(function(item){
                return item.data.card_number != account.data.card_number;
              }).map(function(item){
                return item
              })

              this.props.openModal({
                open: true,
                title: "Account",
                body: "Account removed",
                yesButtonOnly: true,
                yesText: "Okay",
                theme: this.props.app_theme
              })
              
              console.log(filteredItems)
            }, () => {
              console.log(filteredItems)
            })                   
          },
        },
      ],
      {cancelable: true},
    );
  }

  redirectToSetMpin = async (res) => {
    if(res.data.mpin == undefined || res.data.mpin == "") {
      const USER_PROFILE = await DB.profile()
      const SESSION = await DB.session()
      console.log(USER_PROFILE, SESSION)
      let sessiondata = {
        card_number: USER_PROFILE.data.card_number,
        lcard_uuid: USER_PROFILE.data.lcard_uuid,
        mobile_number: Theme.formatter.PMBL(USER_PROFILE.data.mobile)
      }

      let data = {
        sessiondata: sessiondata,
        token: SESSION.token,
        type: "addcard"
      }
      this.props.navigation.navigate("Setmpin", data)
    } else {
      this.props.navigation.reset({
        index: 0,
        routes: [{name: 'Mpin'}],
      });
    }
  }

  proceed = async (result) => {
    if(result) {
      const SESSION = await DB.session()
      this.setState({ loading: true })
      this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(res => {
        DB.updateProfile(res, success => {
          this.setState({ loading: false })
          this.redirectToSetMpin(res)
        }, error => {
          console.log(error)
          this.setState({ loading: false })
        })
      })    
    }
  }

  proceedToSwitch = () => {
    this.props.navigation.reset({
      index: 0,
      routes: [{name: 'Main'}],
    });
  }

  renderAccount = () => {
    if (this.state.accounts.length <= 1) return null;
    return (
      <>
        <View style={{alignItems: 'center'}}>
          <Text
            style={{
              padding: 20,
              color: this.props.app_theme?.theme.colors.text,
              fontFamily: 'Arial',
              fontWeight: 'bold',
              fontSize: 17,
            }}>
            Switch Account
          </Text>
        </View>
        { this.state.accounts.length > 1 && this.state.accounts.map((account, index) => {
          if (account.data.card_number == this.state.data?.card_number) return null;
          return (
            <TouchableOpacity onPress={() => this.switchAccount(account, index)}>
              <View style={{flexDirection: 'row', padding: 20, marginBottom: 15}}>
                <View>
                  <NBImage
                    style={{height: 50, width: 50, marginRight: 10, borderRadius: 25}}
                    source={account.data ? account.data.photo == '' ? Assets.logo.profileHolder : {uri: account.data.photo} : Assets.logo.profileHolder}
                  />
                </View>
                <View style={{flex: 3, justifyContent: 'center'}}>
                  <Text
                    style={{
                      fontSize: 18,
                      fontFamily: 'Arial',
                      color: this.props.app_theme?.theme.colors.text,
                      fontWeight: 'bold',
                    }}>
                    {account.data ? Theme.formatter.NAME(account.data) : null}
                  </Text>
                  <Text
                    style={{
                      fontSize: 14,
                      fontFamily: 'Arial',
                      color: this.props.app_theme?.theme.colors.text,
                      fontWeight: 'bold',
                    }}>
                    {account.data ? Theme.formatter.CN(account.data.card_number) : null}
                  </Text>
                </View>
                <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center', flexDirection: 'row' }}>
                  <TouchableOpacity
                  style={{ justifyContent: 'center', alignItems: 'center', padding: 8, backgroundColor: Theme.colors.primary, borderRadius: 5 }}
                  onPress={() => this.removeAccount(account)}>
                    <Text numberOfLines={1} adjustsFontSizeToFit style={{fontSize: 15, fontWeight: 'bold', color: '#fff'}}>Remove</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </TouchableOpacity>
          );
        })}
      </>
    );
  };

  render() {
    if (!this.state.connected) {
      return (
        <View style={{flex: 1}}>
          <CustomHeader title="My Account" menu={false} navigation={this.props.navigation} />
          <Elements.nointernet
            message="No internet found. Please check your internet connection."
            buttonText="Try Again"
            onPress={() => this.init()}
          />
        </View>
      );
    }
    return (
      <CustomSafeArea>
        <Elements.loaderView 
          title="Validating"
          message="Please wait..."
          isDarkMode={this.props.app_theme?.theme.dark}
          backgroundColor={this.props.app_theme?.theme.colors.border}
          color={this.props.app_theme?.theme.colors.text}
          visible={this.state.loading} />
        <CustomHeader
          title="My Account"
          onBackPress={() => this.props.navigation.goBack()}
          menu={false}
          navigation={this.props.navigation}
        />
        <View
          style={{width: '100%', height: 70, alignSelf: 'center', marginTop: 30}}>
          <Image
            source={Assets.logo.unioil}
            style={{width: '100%', height: '85%', resizeMode: 'contain'}}
          />
        </View>
        <View style={{flex: 1}}>
          <View>
            <View style={{flexDirection: 'row', padding: 20, marginBottom: 15}}>
              <View>
                <NBImage
                  style={{height: 50, width: 50, marginRight: 10, borderRadius: 25}}
                  source={this.state.data ? this.state.data.photo == '' ? Assets.logo.profileHolder : {uri: this.state.data.photo} : Assets.logo.profileHolder}
                />
              </View>
              <View style={{flex: 3, justifyContent: 'center'}}>
                <Text
                  style={{
                    fontSize: 18,
                    fontFamily: 'Arial',
                    color: this.props.app_theme?.theme.colors.text,
                    fontWeight: 'bold',
                  }}>
                  {this.state.data ? Theme.formatter.NAME(this.state.data) : null}
                </Text>
                <Text
                  style={{
                    fontSize: 14,
                    fontFamily: 'Arial',
                    color: this.props.app_theme?.theme.colors.text,
                    fontWeight: 'bold',
                  }}>
                  {this.state.data ? Theme.formatter.CN(this.state.data.card_number) : null}
                </Text>
              </View>
            </View>
            <Divider />
          </View>
  
          {this.renderAccount()}
        </View>
        {this.state.accounts.length < 5 ?
        <View
          style={{
            flex: 0,
            width: '100%',
            flexDirection: 'column',
            zIndex: 111,
            bottom: 25,
            alignItems: 'center',
          }}>
          <TouchableOpacity
            style={{padding: 20}}
            onPress={() => {
              if(this.state.accounts.length > 5) return
              this.props.navigation.navigate('AddAccountCard', {
                data: this.state.data,
                type: "addcard",
                callback: (result) => {
                  this.init();

                  this.props.openModal({
                    open: true,
                    title: "Account",
                    body: result ? "Successfully switched to account" : "Try Again",
                    yesButtonOnly: true,
                    yesText: "Okay",
                    yesCB: () => this.proceed(result),
                    theme: this.props.app_theme
                  })
                },
              })
            }}>
            <View style={{flexDirection: 'row', padding: 5}}>
              <Icon.MaterialIcons
                name="credit-card"
                size={20}
                color={Theme.colors.primary}
              />
              <Text
                style={{
                  fontFamily: 'Arial',
                  color: Theme.colors.primary,
                  marginLeft: 10,
                  fontSize: 16,
                }}>
                Add a Card
              </Text>
            </View>
          </TouchableOpacity>
        </View> : null}
      </CustomSafeArea>
    );
  }
}

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

const mapDispatchToProps = {
  savePlainUserInfo,
  saveUserInfo,
  openModal
}

export default connect(mapStateToProps, mapDispatchToProps)(About);