import React, { Component } from 'react';
import { Animated, Alert, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import I18n from 'react-native-i18n'
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
import * as Utils from '../../utils/DeviceUtils';
import Icons from 'react-native-vector-icons/Ionicons'
import { Images } from '../../config/Images';
import CustomButton from '../../components/CustomButton';
import { Color } from '../../config/Color';
import Tag from '../../components/Tag';
import { IlinkEmitter } from "../../utils/events";
import { CreditCardInput } from "react-native-credit-card-input";
import { Typography, FontWeight } from '../../config/typography';
import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
import { getWalletDetailActivated, resetWalletListDetailReducer } from '../../webservice/WalletApi';
import { depositActionReset } from '../../webservice/DepositApi';
import { getWalletTransactionHistory, getWalletTransactionHistoryReset } from '../../webservice/WalletTransactionHistoryApi';
import { getUserIdentificationAction, getUserIdentificationResetAction } from '../../webservice/IdentificationApi';
import { transferCommissionAction } from '../../webservice/WalletTransferCommission';
import { resetCommissionReducer } from '../../webservice/WalletTransferCommission';
import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
import isEqual from 'lodash/isEqual';
import { baseUrl } from '../../webservice/IlinkConstants';
let moment = require('moment-timezone');
import 'moment/locale/fr'
import 'moment/locale/es-us'
import 'moment/locale/en-au'
import 'moment/locale/en-ca'
import 'moment/locale/en-ie'
import 'moment/locale/en-il'
import 'moment/locale/en-nz'
import 'moment/locale/en-gb'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { thousandsSeparators, isEmptyObject, transactionHistoryUser, optionDepotUserScreen, optionRetraitUserScreen, transactionHistoryLabel, optionPaiementFacture, displayToast } from '../../utils/UtilsFunction';
import DeviceInfo from 'react-native-device-info';
import { readUser } from '../../webservice/AuthApi';
const thousands = require('thousands');

let route = require('./../../route.json');
let slugify = require('slugify');
require('../../utils/Translations');

class WalletDetailUser extends Component {

     constructor(props) {
          super(props);
          this.state = {
               index: 0,
               heightHeader: Utils.heightHeader(),
               isModalConfirmVisible: false,
               wallet: null,
               triggerTransferCommission: false,
               loading: false,
               isTriggerRefresh: false,
               scrollHeaderY: 0,
               user: null,
               isIdentified: false,
               isIdentifiedValidated: false,

          };

          slugify.extend({ '+': 'plus' });

          this.scrollY = new Animated.Value(0);
          this.scrollHeaderY = new Animated.Value(0);
          this.deltaY = new Animated.Value(0);
          this.bgBannerY = new Animated.Value(0);

          this.heightImageBanner = Utils.scaleWithPixel(250, 1);
          this.marginTopBanner = this.heightImageBanner - this.state.heightHeader - 40;
          this.currentLocale = DeviceInfo.getDeviceLocale().includes("fr") ? "fr" : "en-gb";
          moment.locale(this.currentLocale);
          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));

          this.props.getWalletTransactionHistoryReset();
          this.props.depositActionReset();
          this.props.resetWalletListDetailReducer();

          this.props.getWalletDetailActivated(this.props.navigation.state.params.userId, null);
          this.props.getWalletTransactionHistory(this.props.navigation.state.params.userId);
          this.props.getUserIdentificationResetAction();

          readUser().then((user) => {
               if (user) {
                    if (user !== undefined) {
                         this.setState({ user });
                         this.props.getUserIdentificationAction(user.id);
                    }
               }
          });
     }

     static navigatorStyle = {
          navBarBackgroundColor: Color.primaryColor,
          statusBarColor: Color.primaryDarkColor,
          navBarTextColor: '#FFFFFF',
          navBarButtonColor: '#FFFFFF'

     };

     static navigationOptions = () => {
          return {
               //title: I18n.t('WALLET'),
               //title: this.isHomeRootView ? I18n.t('WALLET') : ((typeof this.props.navigation.state.params !== 'undefined') && this.props.navigation.state.params.wallet.network),
               drawerLabel: () => null,
               headerTitle: I18n.t('WALLET'),
               headerTintColor: 'white',
               headerStyle: {
                    backgroundColor: Color.primaryColor,
                    marginTop: 23,
                    color: 'white'
               },
               headerTitleStyle: {
                    color: "white"
               },
               title: I18n.t('WALLET')
          }
     };

     componentDidMount() {
          const { result, resultUserIdentification, errorUserIdentification } = this.props;

          if (result !== null) {
               if (typeof result.response !== 'undefined') {
                    const wallet = result.response[0];
                    this.setState({
                         wallet: wallet,
                         isTriggerRefresh: false
                    })
               }
          }

          if (resultUserIdentification !== null) {
               console.log("RESULT NUMBER DETAIL", resultUserIdentification);
               if (typeof resultUserIdentification.response !== 'undefined') {
                    this.setState({
                         isIdentified: resultUserIdentification.response.isIdentified,
                         isIdentifiedValidated: resultUserIdentification.response.isIdentifiedValidated,
                    })
               }
          }

     }

     shouldComponentUpdate(nextProps, nextState) {

          if (this.state.triggerTransferCommission !== nextState.triggerTransferCommission) {

               return false;
          } else {
               return true;
          }
     }

     getWalletIcon = (wallet) => {
          return `${baseUrl}/datas/img/network/${slugify(wallet.network, { lower: true })}-logo.png`;

     }

     getCreationDateToHumanFormat = (date) => {
          let re = moment.tz(date, 'Etc/GMT+0').format();
          return moment(re).fromNow();
     }

     updateLangue() {
          this.props.navigation.setParams({ name: I18n.t('WALLET') })
          this.forceUpdate()
     }

     handleIndexChange = index => this.setState({ index });

     imageScale = () => {
          return this.scrollY.interpolate({
               inputRange: [0, 100],
               outputRange: [1, 0.5],
               extrapolate: 'clamp',
          });
     }

     imageTranslateY = () => {
          return this.scrollY.interpolate({
               inputRange: [0, 100],
               outputRange: [-5, 50],
               extrapolate: 'clamp',
          });
     }

     bgHeaderTranslateY = () => {
          return this.scrollY.interpolate({
               inputRange: [0, 150],
               outputRange: [-5, 0],
               extrapolate: 'clamp',
          });
     }

     refresh = () => {
          let userId = this.props.navigation.state.params.userId;
          this.props.getWalletDetailActivated(userId, null);
     }


     renderHeader = (wallet) => (
          <View style={[
               styles.containField,
               {
                    backgroundColor: Color.cardBackgroundColor,
                    zIndex: 11,
                    shadowColor: Color.borderColor,
                    borderColor: Color.borderColor,
               }
          ]}>
               <View style={[styles.contentLeftItem]}>
                    <Text numberOfLines={1} style={[Typography.body1, Typography.semibold]}>{I18n.t('COUNTRY')}</Text>
                    <Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>Pays</Text>
               </View>

               <View style={{
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'flex-end',
               }}>
                    <Animated.Image
                         source={{ uri: this.getWalletIcon(wallet) }}
                         style={{
                              width: 120,
                              height: 120,
                              borderRadius: 60,
                              position: 'absolute',
                              alignSelf: 'center',
                              backgroundColor: Color.whiteColor,
                              bottom: 70,
                              transform: [{
                                   scale: this.imageScale()
                              },
                              {
                                   translateY: this.imageTranslateY()
                              }]
                         }} />

                    <View style={{
                         marginTop: 1, flex: 1,
                         alignItems: 'center',
                         justifyContent: 'flex-end'
                    }}>
                         <Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>{wallet.network}</Text>
                         <Tag icon={<Icon name='update' size={20} color={Color.whiteColor} />} primary style={styles.tagFollow}
                              onPress={() => {
                                   this._scrollView.scrollToEnd();
                              }}>
                              {I18n.t('TRANSACTION_HISTORY')}
                         </Tag>
                    </View>
               </View>
               <View style={styles.contentLeftItem}>
                    <Text numberOfLines={1} style={[Typography.body1, Typography.semibold]} >{I18n.t('CREATION_DATE')}</Text>
                    <Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>{this.getCreationDateToHumanFormat(wallet.createdAt)}</Text>
               </View>
          </View>
     );

     renderLoader = () => {
          return (
               <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    {Platform.OS === 'android'
                         ?
                         (
                              <>
                                   <ProgressBarAndroid />
                                   <Text>{I18n.t('LOADING_DOTS')}</Text>
                              </>
                         ) :
                         <>
                              <ActivityIndicator size="large" color={'#ccc'} />
                              <Text>{I18n.t('LOADING_DOTS')}</Text>
                         </>
                    }
               </View>
          )
     }

     renderAccountDetail = (wallet) => (
          <View style={{ flexDirection: 'row', flex: 1, justifyContent: 'space-between' }}>

               <View
                    style={{
                         flexDirection: 'row',
                         alignItems: 'center',
                    }}>
                    <View
                         style={[
                              styles.circlePoint,
                              { backgroundColor: Color.primaryColor },
                         ]}>
                         <Icons name='md-wallet'
                              size={28}
                              color={Color.whiteColor}
                         />
                    </View>
                    <View>
                         <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
                              {I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
                         </Text>
                         <Text style={[Typography.body2]}>{thousands(wallet.balance, ' ')}</Text>
                    </View>
               </View>

               <View
                    style={{
                         flexDirection: 'row',
                         alignItems: 'center',
                    }}>
                    <View
                         style={[
                              styles.circlePoint,
                              { backgroundColor: Color.primaryColor },
                         ]}>
                         <Icons name='md-key'
                              size={28}
                              color={Color.whiteColor}
                         />
                    </View>
                    <View>
                         <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
                              {I18n.t('NUMERO_COMPTE')}
                         </Text>
                         <Text style={[Typography.body2]}>{wallet.user_code}</Text>
                    </View>
               </View>

          </View>
     );

     renderDetailWallet = (wallet) => {
          return (
               !isEmptyObject(wallet) ?
                    (<>
                         {this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}

                         <View
                              style={styles.container}>

                              <Animated.View style={{
                                   position: 'absolute',
                                   width: "100%",
                                   zIndex: 1,
                                   backgroundColor: Color.primaryColor,
                                   height: 140 - this.state.scrollHeaderY,
                              }} />

                              <ScrollView ref={component => this._scrollView = component}
                                   style={{
                                        paddingHorizontal: 20, position: 'absolute',
                                        width: '100%',
                                        height: '100%',
                                        zIndex: 2
                                   }}
                                   scrollEventThrottle={8}
                                   onScroll={Animated.event([
                                        {
                                             nativeEvent: {
                                                  contentOffset: { y: this.scrollY },
                                             },
                                        },
                                   ],
                                        { listener: (event) => { this.setState({ scrollHeaderY: event.nativeEvent.contentOffset.y }); } })}>
                                   <View style={{ marginTop: 80, }}>

                                        {this.renderHeader(wallet)}

                                        <View
                                             style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>

                                             {this.renderAccountDetail(wallet)}

                                             <>
                                                  <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
                                                       <Text
                                                            style={[Typography.title3, Typography.semibold]}>
                                                            {I18n.t('TRANSACTIONS')}
                                                       </Text>
                                                  </View>

                                                  <View style={styles.transactionContainer}>

                                                       <View style={[styles.containerTouch]}>
                                                            <TouchableOpacity style={styles.contain}
                                                                 onPress={() => {
                                                                      this.props.navigation.push(route.walletOptionSelect, {
                                                                           optionSelect: optionDepotUserScreen,
                                                                           lottie: {
                                                                                source: require("./../../datas/json/wallet_with_cash.json"),
                                                                                loop: false
                                                                           }
                                                                      })
                                                                 }}
                                                                 activeOpacity={0.9}>
                                                                 <Icon name='arrow-bottom-right'
                                                                      color={Color.primaryColor}
                                                                      size={30}
                                                                      style={styles.imageBanner} />

                                                                 <View style={[styles.content]}>

                                                                      <View style={styles.contentTitle}>
                                                                           <Text style={[Typography.headline, Typography.semibold]}>
                                                                                {I18n.t('DEPOSIT')}
                                                                           </Text>
                                                                      </View>

                                                                      <View style={{ flex: 1 }}>
                                                                           <Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                                {I18n.t('DEPOSIT_DESCRIPTION')}
                                                                           </Text>
                                                                      </View>

                                                                 </View>
                                                            </TouchableOpacity>
                                                       </View>

                                                       <View style={[styles.containerTouch]}>

                                                            <TouchableOpacity style={styles.contain}
                                                                 onPress={() => {
                                                                      this.props.navigation.push(route.walletOptionSelect, {
                                                                           optionSelect: optionRetraitUserScreen,
                                                                           lottie: {
                                                                                source: require("./../../datas/json/wallet_with_cash.json"),
                                                                                loop: true
                                                                           }
                                                                      })
                                                                 }}
                                                                 activeOpacity={0.9}>

                                                                 <Icon name='arrow-top-left'
                                                                      color={Color.primaryColor}
                                                                      size={30}
                                                                      style={styles.imageBanner} />

                                                                 <View style={[styles.content]}>

                                                                      <View style={styles.contentTitle}>
                                                                           <Text style={[Typography.headline, Typography.semibold]}>
                                                                                {I18n.t('WITHDRAWAL')}
                                                                           </Text>
                                                                      </View>

                                                                      <View style={{ flex: 1 }}>
                                                                           <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                                {I18n.t('WITHDRAWAL_DESCRIPTION')}
                                                                           </Text>
                                                                      </View>

                                                                 </View>
                                                            </TouchableOpacity>
                                                       </View>
                                                  </View>

                                                  <View style={styles.transactionContainer}>

                                                       <View style={[styles.containerTouch]}>

                                                            <TouchableOpacity style={styles.contain}
                                                                 onPress={() => { }}
                                                                 activeOpacity={0.9}>

                                                                 <Icon name='cash-multiple'
                                                                      color={Color.primaryColor}
                                                                      size={30}
                                                                      style={styles.imageBanner} />

                                                                 <View style={[styles.content]}>

                                                                      <View style={styles.contentTitle}>
                                                                           <Text style={[Typography.headline, Typography.semibold]}>
                                                                                {I18n.t('NANO_CREDIT')}
                                                                           </Text>
                                                                      </View>

                                                                      <View style={{ flex: 1 }}>
                                                                           <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>

                                                                           </Text>
                                                                      </View>

                                                                 </View>
                                                            </TouchableOpacity>
                                                       </View>

                                                       <View style={[styles.containerTouch]}>
                                                            <TouchableOpacity style={styles.contain}
                                                                 onPress={() => { }}
                                                                 activeOpacity={0.9}>
                                                                 <Icon name='heart-multiple'
                                                                      color={Color.primaryColor}
                                                                      size={30}
                                                                      style={styles.imageBanner} />

                                                                 <View style={[styles.content]}>

                                                                      <View style={styles.contentTitle}>
                                                                           <Text style={[Typography.headline, Typography.semibold]}>
                                                                                {I18n.t('NANO_SANTE')}
                                                                           </Text>
                                                                      </View>

                                                                      <View style={{ flex: 1 }}>
                                                                           <Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                                {I18n.t('NANO_SANTE_DESCRIPTION')}
                                                                           </Text>
                                                                      </View>

                                                                 </View>
                                                            </TouchableOpacity>
                                                       </View>
                                                  </View>

                                                  <View style={styles.transactionContainer}>

                                                       <View style={[styles.containerTouch]}>

                                                            <TouchableOpacity style={styles.contain}
                                                                 onPress={() => {
                                                                      this.props.navigation.push(route.walletOptionSelect, {
                                                                           optionSelect: optionPaiementFacture,
                                                                           onGoBack: () => this.refresh(),
                                                                           lottie: {
                                                                                source: require("./../../datas/json/paiement_facture.json"),
                                                                                loop: true
                                                                           }
                                                                      })
                                                                 }} activeOpacity={0.9}>

                                                                 <Icon name='file-document'
                                                                      color={Color.primaryColor}
                                                                      size={30}
                                                                      style={styles.imageBanner} />

                                                                 <View style={[styles.content]}>

                                                                      <View style={styles.contentTitle}>
                                                                           <Text style={[Typography.headline, Typography.semibold]}>
                                                                                {I18n.t('PAIEMENT_FACTURE')}
                                                                           </Text>
                                                                      </View>

                                                                      <View style={{ flex: 1 }}>
                                                                           <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                           </Text>
                                                                      </View>

                                                                 </View>
                                                            </TouchableOpacity>
                                                       </View>


                                                       <View style={[styles.containerTouch]}>

                                                            <TouchableOpacity style={styles.contain}
                                                                 onPress={() => {
                                                                      if (this.state.isIdentified)
                                                                           this.props.navigation.push(route.createIdentificationUser)
                                                                      else
                                                                           displayToast(I18n.t('ALREADY_IDENTIFIED'))
                                                                 }}
                                                                 activeOpacity={0.9}>

                                                                 <Icon name='pencil-plus'
                                                                      color={Color.primaryColor}
                                                                      size={30}
                                                                      style={styles.imageBanner} />

                                                                 <View style={[styles.content]}>

                                                                      <View style={styles.contentTitle}>
                                                                           <Text style={[Typography.headline, Typography.semibold]}>
                                                                                {I18n.t('CREATION_IDENTIFICATION_CLIENT')}
                                                                           </Text>
                                                                      </View>

                                                                      <View style={{ flex: 1 }}>
                                                                           <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                           </Text>
                                                                      </View>

                                                                 </View>
                                                            </TouchableOpacity>
                                                       </View>
                                                  </View>
                                             </>

                                             {this.renderHistoryTransaction()}
                                        </View>


                                   </View>

                              </ScrollView>
                         </View>
                    </>)
                    :
                    (
                         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                              <Text style={Typography.body1}>{I18n.t('NO_WALLET_ACTIVED')}</Text>
                         </View>
                    )
          )

     }


     renderHistoryTransactionItem = (item, index) => {

          return (
               <View style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
                    {
                         Object.keys(item).map((element, i) => (
                              <View style={{ alignItems: 'center' }} key={i}>
                                   <Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
                                        {isEqual(element, 'date')
                                             ? this.getCreationDateToHumanFormat(item[element])
                                             :
                                             item[element]
                                        }
                                   </Text>
                              </View>
                         ))
                    }
               </View>
          );

          /*                <View
                              key={item.id}
                              style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}>
                              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                   <View style={styles.iconContent}>
                                        <Icon name='arrow-bottom-right'
                                             color={Color.primaryColor} size={20} />
                                   </View>
                                   <View>
                                        <Text style={Typography.subhead}>{item.description}</Text>
                                        <Text style={[Typography.caption1, Color.grayColor]} style={{ marginTop: 5 }}>
                                             {date}
                                        </Text>
                                   </View>
                              </View>
                         </View> */

     }

     renderHistoryTransactionList = () => {
          return (
               <>
                    <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
                         <Text
                              style={[Typography.title3, Typography.semibold]}>
                              {I18n.t('TRANSACTION_HISTORY')}
                         </Text>
                    </View>
                    <View style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
                         {
                              transactionHistoryLabel().map((item, index) => (
                                   <View style={{ alignItems: 'center' }} key={index}>
                                        <Icon name={item.icon} size={24} color={Color.primaryColor} />
                                        <Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
                                             {item.label}
                                        </Text>
                                   </View>
                              ))
                         }
                    </View>
                    {
                         transactionHistoryUser().map((item, index) => (
                              this.renderHistoryTransactionItem(item, index)
                         ))
                    }
               </>
          )
     }


     renderHistoryTransaction = () => {

          return (
               <>
                    {
                         this.props.loadingTransaction ?
                              (
                                   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                        {Platform.OS === 'android'
                                             ?
                                             (
                                                  <>
                                                       <ProgressBarAndroid />
                                                       <Text>{I18n.t('LOADING_DOTS')}</Text>

                                                  </>
                                             ) :
                                             <>
                                                  <ActivityIndicator size="large" color={'#ccc'} />
                                                  <Text>{I18n.t('LOADING_DOTS')}</Text>
                                             </>
                                        }
                                   </View>
                              ) : this.renderHistoryTransactionList()
                    }
               </>
          )
     }

     render() {

          return (
               <>
                    <StatusBar
                         backgroundColor={Color.primaryDarkColor}
                         barStyle="light-content"
                         translucent={true}
                    />
                    {
                         ((this.props.loading || this.props.loadingUserIdentification) ?
                              this.renderLoader() :
                              (
                                   this.props.result !== null ?

                                        Array.isArray(this.props.result.response) && (this.props.result.response.length) === 0 ?

                                             <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                                  <Text style={Typography.body1}>{I18n.t('NO_WALLET_ACTIVED')}</Text>
                                             </View>
                                             :

                                             this.renderDetailWallet(this.props.result.response)
                                        :
                                        null
                              )
                         )
                    }

               </>
          );
     }
}


const mapStateToProps = state => ({
     loading: state.walletDetailReducer.loading,
     result: state.walletDetailReducer.result,
     error: state.walletDetailReducer.error,

     loadingTransaction: state.walletHistoryReducer.loadingTransaction,
     resultTransaction: state.walletHistoryReducer.resultTransaction,
     errorTransaction: state.walletHistoryReducer.errorTransaction,

     loadingUserIdentification: state.getUserIdentificationReducer.loading,
     resultUserIdentification: state.getUserIdentificationReducer.result,
     errorUserIdentification: state.getUserIdentificationReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({
     getWalletDetailActivated,
     getWalletTransactionHistory,
     transferCommissionAction,
     resetWalletListDetailReducer,
     resetCommissionReducer,
     getWalletTransactionHistoryReset,
     depositActionReset,
     getUserIdentificationAction,
     getUserIdentificationResetAction
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(WalletDetailUser);
const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.containerBackgroundColor
     },
     indicator: {
          height: 2
     },
     tab: {
          width: Utils.getWidthDevice() / 2
     },
     tabbar: {
          height: 40
     },
     imgBanner: {
          width: '100%',
          height: 250,
          position: 'absolute',
     },
     contentService: {
          paddingVertical: 10,
          borderBottomWidth: 0.5,
          flexDirection: 'row',
          flexWrap: 'wrap',
          justifyContent: 'space-between',
     },
     blockView: {
          paddingVertical: 10,
          borderBottomWidth: 0.5,
     },
     containField: {
          padding: 10,
          marginBottom: 20,
          borderWidth: 0.5,
          shadowOffset: { width: 1.5, height: 1.5 },
          shadowOpacity: 1.0,
          elevation: 5,
          flexDirection: "row",
          height: 140,
          borderRadius: 10
     },
     paymentItem: {
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
          borderBottomWidth: 1,
          paddingVertical: 5,
          width: responsiveWidth(100),
          marginBottom: 15
     },
     iconContent: {
          width: 60,
          marginRight: 10,
          alignItems: "center"
     },
     contentLeftItem: {
          flex: 1,
          paddingTop: 40,
          paddingLeft: 10,
          paddingRight: 10,
          alignItems: "center"
     },
     tagFollow: { width: 150, margin: 10 },
     profileItem: {
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          paddingBottom: 20,
          paddingTop: 20
     },
     checkDefault: {
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          borderBottomWidth: 1,
          paddingVertical: 10,
          marginTop: 5
     },
     blockView: {
          paddingVertical: 10,
          borderBottomWidth: 0.5,
     },
     circlePoint: {
          width: 50,
          height: 50,
          borderRadius: 25,
          marginRight: 5,
          alignItems: 'center',
          justifyContent: 'center',
     },
     transactionContainer: {
          flexDirection: 'row',
          flex: 1,
          paddingTop: 10,
          paddingTop: 10,
          paddingLeft: 10,
          paddingRight: 10,
     },
     containerTouch: {
          flex: 1,
          flexDirection: 'row',
          alignItems: 'center',
          marginRight: 1,
          shadowColor: Color.borderColor,
          borderColor: Color.borderColor,
          borderWidth: 0.5,
          shadowOffset: { width: 1.5, height: 1.5 },
          shadowOpacity: 1.0,
          elevation: 5,
          borderRadius: 10,
          backgroundColor: Color.cardBackgroundColor
     },

     contain: {
          flexDirection: 'row',
          justifyContent: 'space-between',
     },
     imageBanner: {
          marginTop: 15,
          marginLeft: 5,
          width: Utils.scaleWithPixel(30),
          height: Utils.scaleWithPixel(30)
     },
     content: {
          height: Utils.scaleWithPixel(60),
          paddingHorizontal: 10,
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          flex: 1,
     },
     contentTitle: {
          paddingTop: 5,
     }
})