import React, {Component} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import R from '../../../assets/R';
import AppText from '../../../components/AppText';
import {getFontXD} from '../../../Config/Functions';
const DetailPartner = (props) => {
  const {
    fullname,
    picture_url,
    cqg_status_name,
    status_name,
    created,
    email,
    level,
    sponsor_name,
    commission,
    partner_count,
  } = props.route.params.data;

  return (
    <View style={{flex: 1, borderColor: 'white'}}>
      <HeaderBack title={'Detail'} />
      <View style={{flex: 1}}>
        <View style={styles.containerTop}>
          <Image style={styles.img} source={{uri: picture_url}} />
        </View>

        <View style={styles.row}>
          <View style={styles.wrapLeft}>
            <AppText style={styles.txtTitle} i18nKey={'Fullname'} />
          </View>
          <View style={styles.wrapRight}>
            <Text
              style={{
                fontSize: getFontXD(46),
                textTransform: 'uppercase',
                fontWeight: '600',
              }}>
              {fullname}
            </Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.wrapLeft}>
            <AppText style={styles.txtTitle} i18nKey={'level'} />
          </View>
          <View style={styles.wrapRight}>
            <Text style={{fontSize: getFontXD(42)}}>{level}</Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.wrapLeft}>
            <AppText style={styles.txtTitle} i18nKey={'Sponsor'} />
          </View>
          <View style={styles.wrapRight}>
            <Text style={{fontSize: getFontXD(42)}}>{sponsor_name}</Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.wrapLeft}>
            <AppText style={styles.txtTitle} i18nKey={'Email'} />
          </View>
          <View style={styles.wrapRight}>
            <Text style={{fontSize: getFontXD(42)}}>{email}</Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.wrapLeft}>
            <AppText style={styles.txtTitle} i18nKey={'Status'} />
          </View>
          <View style={styles.wrapRight}>
            <Text style={{fontSize: getFontXD(42)}}>{status_name}</Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.wrapLeft}>
            <AppText style={styles.txtTitle} i18nKey={'DateJoin'} />
          </View>
          <View style={styles.wrapRight}>
            <Text style={{fontSize: getFontXD(42)}}>{created}</Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.wrapLeft}>
            <AppText style={styles.txtTitle} i18nKey={'OpenAccountExchange'} />
          </View>
          <View style={styles.wrapRight}>
            <Text style={{fontSize: getFontXD(42)}}>{cqg_status_name}</Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.wrapLeft}>
            <AppText style={styles.txtTitle} i18nKey={'CountSponsors'} />
          </View>
          <View style={styles.wrapRight}>
            <Text style={{fontSize: getFontXD(42)}}>{partner_count}</Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.wrapLeft}>
            <AppText style={styles.txtTitle} i18nKey={'TotalCommission'} />
          </View>
          <View style={styles.wrapRight}>
            <Text style={{fontSize: getFontXD(42)}}>{commission}</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: R.colors.white,
    padding: 10,
    marginTop: 10,
    marginHorizontal: 10,
    borderRadius: 5,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.15,
    shadowRadius: 1.84,
    elevation: 2,
    flexDirection: 'row',
    alignItems: 'center',
  },
  img: {
    width: 80,
    height: 80,
    borderRadius: 45,
    borderWidth: 0.4,
    borderColor: R.colors.main,
  },
  wrapLeft: {
    flex: 1,
    justifyContent: 'center',
    marginRight: 5,
  },
  wrapRight: {
    flex: 1,
    justifyContent: 'center',
    marginLeft: 5,
  },
  txtTitle: {
    fontSize: getFontXD(42),
    color: R.colors.color777,
    marginRight: 5,
  },
  txtName: {
    fontSize: getFontXD(46),
    color: R.colors.black,
  },
  containerTop: {
    alignItems: 'center',
    marginVertical: 10,
  },
  row: {
    flexDirection: 'row',
    marginHorizontal: 10,
    marginTop: 5,
  },
});

export default DetailPartner;
