/**
 * Referral页面
 * @邠心vbe on 2021/05/08
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, ScrollView } from 'react-native';
import Button from '../../components/Button';
import Share from 'react-native-share';

export default class Referral extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <ScrollView
        style={styles.container}>
        <Image
          style={styles.topImage}
          source={require('../../images/user/referral-top.png')}/>
        <View style={styles.codeView}>
          <Text style={styles.codeTitle}>Your Referral Code</Text>
          <Text style={styles.codeText}>{userInfo.referralCode}</Text>
          <Text style={styles.codeTips}>Input this at the Registration page</Text>
          {/* <View style={ui.center}>
            <Image
              style={styles.codeImage}
              source={require('../../images/user/qr-referral-code.png')}/>
          </View>
          <Text style={styles.codeTips2}>Let your friends scan QR</Text> */}
        </View>
        <Text style={styles.refferalTips}>Refer a friend to the app receive <Text style={ui.mainText}>{currency}1</Text> into your Juice+ CreditWallet. You will receive <Text style={ui.mainText}>{currency}5</Text> into your Juice+ CreditWallet for your referrer's first credit top-up.</Text>
        {/* <Button
          style={styles.shareButton}
          onClick={() => {
            Share.open({
              title: 'Share',
              message: 'Share Juice Plus',
              url: 'https://csms.evctechnology.com'
            }).then((res) => {
              console.log('share app', res);
            }).catch((err) => {
              err && console.info('share app', err);
            });
          }}>
          <Entypo
            name='share'
            size={16}
            color={'#000'}/>
          <Text style={styles.shareText}>Share to Friends</Text>
        </Button> */}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  topImage: {
    width: $vw(100),
    height: $vw(78.75)
  },
  codeView: {
    width: $vw(83),
    padding: 16,
    marginTop: -43,
    marginLeft: $vw(8.5),
    borderRadius: 20,
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.1)',
    backgroundColor: 'white'
  },
  codeTitle: {
    color: '#000',
    fontSize: 16,
    textAlign: 'center'
  },
  codeText: {
    color: '#FF7A00',
    fontSize: 26,
    fontWeight: 'bold',
    textAlign: 'center',
    paddingTop: 6
  },
  codeTips: {
    color: '#333',
    fontSize: 11,
    textAlign: 'center',
    marginLeft: 8,
    marginRight: 8,
    paddingTop: 10,
    paddingBottom: 16,
    //borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  codeTips2: {
    color: '#333',
    fontSize: 12,
    textAlign: 'center'
  },
  codeImage: {
    width: 170,
    height: 170,
    margin: 16,
  },
  refferalTips: {
    color: '#000',
    fontSize: 14,
    paddingTop: 16,
    lineHeight: 22,
    paddingLeft: 16,
    paddingRight: 16,
    textAlign: 'center'
  },
  shareButton: {
    margin: 32,
    elevation: 2,
    borderRadius: 4,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: colorAccent
  },
  shareText: {
    color: '#000',
    fontSize: 16,
    paddingLeft: 4
  }
});