import React from 'react';
import { connect } from 'react-redux';
import { StyleSheet, Text, View, Platform, TouchableOpacity, Image } from 'react-native';
import { Button, Icon, Header } from 'native-base';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { openDrawer } from '../../actions/drawer';

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

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

  render() {
    return <View style={[styles.tabs, this.props.style ]}>
      <Button transparent onPress={() => this.props.open()} style={styles.tab}>
          <Icon name='ios-menu' style={{color:"#fff"}} />
      </Button>
      {this.props.tabs.map((tab, i) => {
        return <TouchableOpacity key={tab} onPress={() => this.props.goToPage(i)} style={styles.tab}>
        <View style={[(tab === 'md-flame' && (this.props.activeTab === 1)) ? {} : styles.iconBtn,{backgroundColor: (tab === 'md-flame' && (this.props.activeTab === 1) ) ? 'transparent' : (this.props.activeTab === i ? '#E7B220' : 'lightgrey')}]}>
          {( (tab === 'md-cart'))  ?
          <Icon
            name={tab}
            size={20}
            color={'#FFF'}
            ref={(icon) => { this.tabIcons[i] = icon; }}
            style={{marginTop: (tab === 'md-cart') ? 4 : undefined}}
          />
          :
          <FontAwesome name="coffee" />
          }
          </View>
        </TouchableOpacity>;
      })}
    </View>;
  }
});

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10
  },
  iconBtn: {
    backgroundColor: '#D9E0E4',
    width: 30,
    height: 30,
    borderRadius: 15,
    alignItems: 'center',
    justifyContent: 'center'
  },
  menuBtn: {
    fontSize: 24,
  },
  iconBtnA: {
    backgroundColor: '#D9E0E4',
    width: 60,
    height: 30,
    borderRadius: 15,
    alignItems: 'center',
    justifyContent: 'center'
  },
  tabs: {
    backgroundColor: '#000',
    height: (Platform.OS=='android') ? 55 : 70,
    flexDirection: 'row',
    paddingTop: (Platform.OS=='android') ? 15 : 30,
    alignItems: 'center',
    borderWidth: 1,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.1,
    shadowRadius: 1.5,
    elevation: 3,
    borderRightWidth: 0,
    borderBottomColor: 'rgba(0,0,0,0.1)',
  },
});
export default TabBar;

@@ -948,10 +948,32 @@
 ) ? 
-%7B%7D
+styles.iconBtn%0A         
  : s
@@ -1061,24 +1061,42 @@
 1) )
- ? 'transparent'
+%0A          ? 'lightgrey'%0A         
  : (
@@ -1205,34 +1205,73 @@
    %3C
-Icon%0A            name=%7Btab
+FontAwesome name=%22shopping-cart%22%0A            style=%7B%7BfontSize:24%7D
 %7D%0A  
@@ -1284,17 +1284,11 @@
     
-size=%7B20%7D
+ /%3E
 %0A   
@@ -1298,212 +1298,93 @@
     
-  color=%7B'#FFF'%7D%0A            ref=%7B(icon) =%3E %7B this.tabIcons%5Bi%5D = icon; %7D%7D%0A            style=%7B%7BmarginTop: (tab === 'md-cart') ? 4 : undefined%7D%7D%0A          /%3E%0A          :%0A          %3CFontAwesome name=%22coffee%22
+:%0A          %3CFontAwesome name=%22coffee%22%0A            style=%7B%7BfontSize:24%7D%7D%0A            
  /%3E%0A
@@ -1642,38 +1642,38 @@
 kgroundColor: '#
-D9E0E4
+E7B220
 ',%0A    width: 30
@@ -1670,18 +1670,18 @@
  width: 
-30
+45
 ,%0A    he
@@ -1678,34 +1678,34 @@
 45,%0A    height: 
-30
+45
 ,%0A    borderRadi
@@ -1700,34 +1700,34 @@
   borderRadius: 
-15
+22
 ,%0A    alignItems
@@ -1812,167 +1812,8 @@
  %7D,%0A
-  iconBtnA: %7B%0A    backgroundColor: '#D9E0E4',%0A    width: 60,%0A    height: 30,%0A    borderRadius: 15,%0A    alignItems: 'center',%0A    justifyContent: 'center'%0A  %7D,%0A
   ta

fix tab bar icons