/**
 * @flow
 * Created by Rabbit on 2019-04-30.
 */
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { View, Text } from 'react-native';
import BasicIcon from '../BasicIcon';

type Props = {}

class TabButton extends Component<Props> {
  render() {
    const { theme, iconSuite, tabBarIconName, tabBarTitle, focused } = this.props
    const color = focused ? theme.themeColor : theme.Colors.charcoal;
    return (
      <View style={{ alignItems: 'center' }}>
        <BasicIcon
          style={{ margin: 0, padding: 0 }}
          suite={iconSuite}
          name={tabBarIconName}
          size={28}
          color={color}
        />
        <Text
          style={{ color }}
          textAlign="center"
        >
          {tabBarTitle}
        </Text>
      </View>
    );
  }
}

function propsMapping({ theme }) {
  return {
    theme,
  };
}

export default connect(propsMapping, null)(TabButton);
