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

import { View } from 'react-native';
import { Badge } from 'react-native-elements';
import Index from '../BasicIcon';
import Text from '../Text';

type Props = {}

class TabButton extends Component<Props> {
  render() {
    const {
      theme, iconSuite, tabBarIconName, tabBarTitle, focused, badge,
    } = this.props;
    const color = focused ? theme.ThemeColor : theme.Colors.charcoal;
    console.log('badge:', badge);
    const hasBadge = !!badge;
    return (
      <View style={{ alignItems: 'center' }}>
        <Index
          style={{ margin: 0, padding: 0 }}
          suite={iconSuite}
          name={tabBarIconName}
          size={26}
          color={color}
        />
        <Text
          style={{ color, fontSize: 14 }}
          textAlign="center"
        >
          {tabBarTitle}
        </Text>
        {hasBadge
          && (
            <Badge
              status="error"
              value={`${badge}`}
              containerStyle={{ position: 'absolute', top: -6, right: -10 }}
            />
          )
        }
      </View>
    );
  }
}

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

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