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

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

const FirstRoute = () => (
     <ScrollView style={[styles.container, { padding: 20 }]}>

          <View style={{ flex: 1 }}>
               <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
                    <CustomText body2>
                         {I18n.t('ENTER_YOUR_CARD_ID')}
                    </CustomText>
               </View>
          </View>

          <View style={{ marginTop: 10 }}>

               <CreditCardInput />
          </View>

          <View style={{ margin: 20 }}>
               <CustomButton outline onPress={() => { console.log('click') }}>
                    {I18n.t('VALIDATE')}
               </CustomButton>
          </View>
     </ScrollView>
);
const SecondRoute = () => (
     <ScrollView style={[styles.container, { padding: 20 }]}>

     </ScrollView>
);

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);
          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));

     }

     static options(passProps) {
          return {
               topBar: {
                    drawBehind: false,
                    visible: true,
                    animate: true,
                    buttonColor: 'white',
                    background: {
                         color: 'white',
                    },
                    rightButtons: []
               },
               backButton: {
                    visible: true,
                    color: "white"
               },
               buttonColor: "white",
               background: {
                    color: Color.primaryDarkColor
               },
               statusBar: {
                    drawBehind: false,
                    visible: true,
               }
          };
     }

     static navigationOptions = ({ navigation }) => {
          return {
               headerTitle: I18n.t('WALLET'),
               headerStyle: {
                    backgroundColor: Color.primaryColor,
                    paddingTop: 10
               },
               headerTitleStyle: {
                    color: "white"
               }
          }
     };

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

     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 (
               <SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>

                    <StatusBar
                         backgroundColor={Color.primaryDarkColor}
                         barStyle="light-content"
                         translucent={false}
                    />

                    <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>
               </SafeAreaView>
          );
     }
}

const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.containerBackgroundColor
     },
     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
     },
     checkDefault: {
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          borderBottomWidth: 1,
          paddingVertical: 15,
          marginTop: 10
     }
})