import React, {useEffect} from 'react';
import {
  View,
  Text,
  Image,
  StatusBar,
  StyleSheet,
  SafeAreaView,
  ImageBackground,
  TouchableOpacity,
  Platform,
} from 'react-native';
import R from '../../assets/R';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux';
import {HEIGHTXD, toPriceVnd} from '../../Config/Functions';

import {useNavigation} from '@react-navigation/native';
import {WITHDRAW, DEPOSIT, TRANSFER, HISTORY} from '../../routers/ScreenNames';

const HeaderHome = (props) => {
  const navigate = useNavigation();
  return (
    <View style={styles.container}>
      <ImageBackground style={styles.img} source={R.images.headerHome}>
        <StatusBar backgroundColor="transparent" translucent={true} />
      </ImageBackground>
      <View style={{justifyContent: 'center', alignItems: 'center'}}>
        <View style={styles.containerTop}>
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Image source={R.images.avartar} style={styles.imgAvatar} />
            <Text style={styles.txtMoney}> {toPriceVnd(1000000)}</Text>
            <Text style={styles.txtTitle}> VNĐ</Text>
          </View>
          <View style={styles.containerMenu}>
            <TouchableOpacity
              onPress={() => navigate.navigate(DEPOSIT)}
              style={styles.wraper}>
              <Image style={styles.imgIcon} source={R.images.iconDeposit} />
              <Text style={styles.txt}>Nạp tiền</Text>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => navigate.navigate(WITHDRAW)}
              style={styles.wraper}>
              <Image style={styles.imgIcon} source={R.images.iconWithdraw} />
              <Text style={styles.txt}>Rút tiền</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => navigate.navigate(TRANSFER)}
              style={styles.wraper}>
              <Image style={styles.imgIcon} source={R.images.iconTransfer} />
              <Text style={styles.txt}>Chuyển khoản</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => navigate.navigate(HISTORY)}
              style={styles.wraper}>
              <Image style={styles.imgIcon} source={R.images.iconHistory} />
              <Text style={styles.txt}>Lịch sử</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </View>
  );
};

const mapStateToProps = (state) => {
  return {
    user: state.userReducer,
  };
};

export default connect(mapStateToProps, {})(HeaderHome);

const styles = StyleSheet.create({
  container: {},

  img: {
    height: Platform.OS == 'ios' ? HEIGHTXD(728) : HEIGHTXD(808),
    width: '100%',

    justifyContent: 'center',
    alignItems: 'center',
  },
  containerTop: {
    padding: 15,
    height: HEIGHTXD(856),
    width: '90%',
    backgroundColor: R.colors.white,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.25,
    shadowRadius: 2.84,
    elevation: 3,
    marginTop: -180,
  },
  containerMenu: {
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    marginTop: 10,
  },
  wraper: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  imgIcon: {
    width: WIDTHXD(134),
    height: HEIGHTXD(134),
    marginBottom: 10,
    resizeMode: 'contain',
  },
  txt: {
    fontSize: getFontXD(36),
    color: R.colors.txtMain,
  },
  imgAvatar: {
    width: WIDTHXD(200),
    height: WIDTHXD(200),
    borderRadius: WIDTHXD(110),
  },
  txtMoney: {
    fontSize: getFontXD(52),
    color: '#FFB721',
    marginVertical: 5,
    fontWeight: 'bold',
  },
  txtTitle: {
    fontSize: getFontXD(42),
    color: '#A2A2A2',
    fontWeight: 'bold',
  },
});
