import React, { Component } from 'react';
import { Animated, StyleSheet, View, Image, StatusBar, ScrollView, TouchableOpacity, Alert } from 'react-native';
let theme = require('./../../utils/theme.json');
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
const route = require('./../../route.json')
import I18n from 'react-native-i18n'
import { IlinkEmitter } from "../../utils/events";
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
import * as Utils from '../../utils/DeviceUtils';
import { SafeAreaView } from 'react-navigation';
import { Images } from '../../config/Images';
import CustomText from '../../components/CustomText';
import { Color } from '../../config/Color';
import Tag from '../../components/Tag';

require('./../../utils/Translations');

const fakeData = [
     {
          name: 'UBA',
          logo: ''
     },
     {
          name: 'SmallWolrd',
          logo: ''
     },
     {
          name: 'Wafa Cash',
          logo: ''
     },
     {
          name: 'Orange Money',
          logo: ''
     },
     {
          name: 'Mtn Mobile Money',
          logo: ''
     },
     {
          name: 'Ria',
          logo: ''
     },
]
const FirstRoute = () => (
     <View style={[styles.container, { padding: 20 }]} >
          {
               fakeData.map((item) => (
                    <TouchableOpacity
                         style={[
                              styles.profileItem,
                              { borderBottomColor: Color.dividerColor, borderBottomWidth: 1 },
                         ]}
                         onPress={() => {
                         }}>
                         <CustomText body1>{item.name}</CustomText>
                         <Icon
                              name="chevron-right"
                              size={20}
                              color={Color.primaryColor}
                              style={{ marginLeft: 5 }}
                              enableRTL={true}
                         />
                    </TouchableOpacity>
               ))
          }

     </View>
);
const SecondRoute = () => (
     <View style={[styles.container, { padding: 20 }]}>

     </View>
);

export default class WalletDetail extends Component {

     constructor(props) {
          super(props);
          this.state = {
               index: 0,
               routes: [
                    { key: 'depot', title: I18n.t('DEPOSIT') },
                    { key: 'retrait', title: I18n.t('WITHDRAWAL') }
               ]
          };
          this.scrollY = new Animated.Value(0);
     }

     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',
          });
     }

     renderTabBar = props => (
          <TabBar
               {...props}
               scrollEnabled
               indicatorStyle={[styles.indicator, { backgroundColor: Color.primaryColor }]}
               style={[styles.tabBar, { backgroundColor: Color.containerBackgroundColor }]}
               inactiveColor={Color.dividerColor}
               activeColor={Color.grayColor}
               tabStyle={styles.tab}
               renderLabel={({ route, focused, color }) => (
                    <View style={{
                         flex: 1,
                         width: Utils.getWidthDevice() / 2,
                         alignItems: 'center'
                    }}>
                         <CustomText headline semibold={focused} style={{ color }}>
                              {
                                   (route.key === 'depot') ?
                                        (<Icon name='arrow-bottom-right'
                                             color={color} size={20} />)
                                        :
                                        (<Icon name='arrow-top-left'
                                             color={color} size={20} />)
                              }
                              {`  ${route.title}`}

                         </CustomText>

                    </View>
               )}

          />
     );


     render() {
          const { index, routes } = this.state;
          return (

               <ScrollView style={{
                    flex: 1
               }}
                    scrollEventThrottle={8}
                    onScroll={Animated.event([
                         {
                              nativeEvent: {
                                   contentOffset: { y: this.scrollY },
                              },
                         },
                    ])}>

                    <View style={[styles.containField, { backgroundColor: Color.cardBackgroundColor }]}>
                         <View style={styles.contentLeftItem}>
                              <CustomText numberOfLines={1} caption1 >{I18n.t('COMMISSION_ACCOUNT_TITLE')}</CustomText>
                              <CustomText numberOfLines={1} adjustsFontSizeToFit={true} body1 semibold>100 000F</CustomText>
                         </View>

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

                              <View style={{
                                   marginTop: 1, flex: 1,
                                   alignItems: 'center',
                                   justifyContent: 'flex-end'
                              }}>
                                   <CustomText headline semibold numberOfLines={1}>Brice Zele</CustomText>
                                   <Tag primary style={styles.tagFollow}>
                                        {I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')} ->
                                        </Tag>
                              </View>
                         </View>
                         <View style={styles.contentLeftItem}>
                              <CustomText numberOfLines={1} caption1 >{I18n.t('PRINCIPAL_ACCOUNT_TITLE')}</CustomText>
                              <CustomText numberOfLines={1} adjustsFontSizeToFit={true} body1 semibold>1000 000F</CustomText>
                         </View>
                    </View>
                    <TabView
                         lazy
                         navigationState={{ index, routes }}
                         renderScene={SceneMap({
                              'depot': FirstRoute,
                              'retrait': SecondRoute
                         })}
                         onIndexChange={this.handleIndexChange}
                         renderTabBar={this.renderTabBar}
                    />
               </ScrollView>
          );
     }
}

const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: theme.containerBackground
     },
     indicator: {
          height: 2
     },
     tab: {
          width: Utils.getWidthDevice() / 2
     },
     tabbar: {
          height: 40
     },
     containField: {
          margin: 20,
          marginTop: 90,
          flexDirection: "row",
          height: 140,
          borderRadius: 10
     },
     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
     }
})