import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const CustomTabBar = React.createClass({
  tabIcons: [],

  propTypes: {
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array,
  },

  componentDidMount() {
    this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
  },

  setAnimationValue({ value, }) {
    this.tabIcons.forEach((icon, i) => {
      const progress = Math.min(1, Math.abs(value - i));
      icon.setNativeProps({
        style: {
          color: this.iconColor(progress),
        },
      });
    });
  },

  //color between rgb(59,89,152) and rgb(204,204,204)
  iconColor(progress) {
    const red = 40 + (204 - 40) * progress;
    const green = 60 + (204 - 60) * progress;
    const blue = 103 + (204 - 103) * progress;
    return `rgb(${red}, ${green}, ${blue})`;
  },

  render() {
    const containerWidth = this.props.containerWidth;
    const numberOfTabs = this.props.tabs.length;
    const tabUnderlineStyle = {
      position: 'absolute',
      width: containerWidth / numberOfTabs,
      height: 3,
      backgroundColor: 'rgb(40, 60, 103)',
      bottom: 0,
    };

    const offset = containerWidth * 0.1;
    const left = this.props.scrollValue.interpolate({
      inputRange: [0, 1, ], outputRange: [0,  containerWidth / numberOfTabs, ],
    });
    return <View style={[styles.tabs, this.props.style, ]}>
      {this.props.tabs.map((tab, i) => {
        return <TouchableOpacity key={tab} onPress={() => this.props.goToPage(i)} style={styles.tab}>
          <Icon
            name={tab}
            size={30}
            ref={(icon) => { this.tabIcons[i] = icon; }}
          />
        </TouchableOpacity>;
      })}
      <View style={{position:'absolute', width:containerWidth, height:1, backgroundColor: 'rgba(0,0,0,0.05)', bottom:0}} />
      <Animated.View style={[tabUnderlineStyle, { left, }, this.props.underlineStyle, ]} />
    </View>;
  },
});

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 15,
    paddingBottom: 10,
  },
  tabs: {
    height: 55,
    flexDirection: 'row',
    backgroundColor: '#292929',
  },
});

export default CustomTabBar;

@@ -226,16 +226,88 @@
 ons: %5B%5D,
+%0A  // dark.js customIdigo in RGB%0A  iconR: 48,%0A  iconG: 63,%0A  iconB: 159,
 %0A%0A  prop
@@ -893,22 +893,38 @@
 d = 
-40 + (204 - 40
+this.iconR + (204 - this.iconR
 ) * 
@@ -955,22 +955,38 @@
 n = 
-60 + (204 - 60
+this.iconG + (204 - this.iconG
 ) * 
@@ -1016,24 +1016,38 @@
 e = 
-103 + (204 - 103
+this.iconB + (204 - this.iconB
 ) * 
@@ -1371,26 +1371,56 @@
 or: 
-'
+%60
 rgb(
-40, 60, 103)'
+$%7Bthis.iconR%7D,$%7Bthis.iconG%7D,$%7Bthis.iconB%7D)%60
 ,%0A  

Refactor CustomTabBar icon color and change to same blue as toolbarDefaultBg