import * as React from 'react';
import { connect } from "react-redux";
import { 
  View, 
  Text, 
  ImageBackground, 
} from 'react-native';
import { 
  Button, 
  Box 
} from 'native-base';
import NetInfo from "../../components/netstatus";
import CustomIcon from '../../components/icons.js';
import Theme from '../../components/theme.style.js';
import DB from '../../components/storage/';
import moment from 'moment';
import QRCode from 'react-native-qrcode-svg';
import Barcode from 'react-native-barcode-builder';

class MyCard extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    session: null,
    userProfile: null,
    userDetails: {},
    sliderIndex: 0,
    isConnected: false
  }

  componentDidMount() {
    NetInfo.netstatus(isConnected => this.setState({ isConnected: isConnected }))
    this.init()
  }

  componentWillUnmount() {

  }

  init = async () => {
    const USERPROFILE = await DB.profile()
    const SESSION = await DB.session()
    this.setState({ userProfile: USERPROFILE, session: SESSION, userDetails: USERPROFILE.data })
  }

  renderImage = () => {
    return {uri: this.state.userProfile?.data?.card_image}
  }

  renderName = () => {
    return Theme.formatter.NAME(this.state.userProfile?.data || null)
  }

  renderCardNumber = () => {
    return Theme.formatter.CN(this.state.userProfile?.data?.card_number || "")
  }

  renderExpiry = () => {  
    return new moment(new Date(this.state.userProfile?.data?.expiry_date)).format("MM/YY")
  }

  slide = (dir) => {
    if(dir == "+") {
      if(this.state.sliderIndex == 1) this.setState({ sliderIndex: 0 })
      else this.setState({ sliderIndex: 1 })
    } else {
      if(this.state.sliderIndex == 0) this.setState({ sliderIndex: 1 })
      else this.setState({ sliderIndex: 0 })
    }
  }

  getFontColor = (type) => {
    if(type == 'PRIVATEB' || type == 'PARTNERLTW' || type == 'PARTNERMS') return 'black'
    else return 'black'
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white}}>
        <View style={{flex: 1, padding: 15, borderRadius: 15, width: '95%', alignSelf: 'center'}}>
          <ImageBackground source={this.state.isConnected ? this.renderImage() : this.renderImage()} style={{height: 215, overflow: 'hidden', borderRadius: 15}} >
            <View style={{marginTop: '26%'}}>
              <Text style={{fontSize: 15, paddingLeft: 10, fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderName() || null}</Text>
              <Text style={{fontSize: 15, paddingLeft: 10, fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderCardNumber() || null}</Text>
              <Text style={{fontSize: 15, paddingLeft: 10, fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>Card Expiry {this.renderExpiry()}</Text>
            </View>
          </ImageBackground>
        </View>
        <View style={{ flexDirection: "row", flex: 1, left: 0, right: 0, justifyContent: 'space-between', padding: 15 }}>
          <Button iconLeft onPress={() => this.slide("-")} style={{backgroundColor: 'transparent'}}>
            <CustomIcon.AntDesign color={this.props.app_theme?.theme.colors.text} name="left" size={30} />
          </Button>
          <View style={{justifyContent: 'center'}}>
            {this.state.sliderIndex == 0 ? 
              <View style={{borderWidth: 1, borderColor: 'white', padding: 10, backgroundColor: 'white'}}>
                  <QRCode
                  value={this.state.userDetails ? this.state.userDetails?.card_number : this.state.session?.user?.card_number}
                  size={200}
                /> 
              </View>
              : 
              <Barcode 
                value={this.state.userDetails ? this.state.userDetails?.card_number : this.state.session?.user?.card_number} 
                format="CODE128" width={1.7} height={160} />}
          </View>
          <Button iconRight onPress={() => this.slide("+")} style={{backgroundColor: 'transparent'}}>
            <CustomIcon.AntDesign color={this.props.app_theme?.theme.colors.text} name="right" size={30} />
          </Button>
        </View>
        </View>
    );
  }
}

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

export default connect(mapStateToProps, null)(MyCard);