/**
 * # Main.js
 *  This is the main app screen
 *  
 */
'use strict';
/*
 * ## Imports
 *  
 * Imports from redux
 */
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

/**
 * The actions we need
 */
import  * as deviceActions from '../reducers/device/deviceActions';

/**
 * Immutable
 */ 
import {Map} from 'immutable';

/**
 * Router
 */
import {Actions} from 'react-native-router-flux';


/**
 * The components needed from React
 */
import React,
{ 	
  Component,
  StyleSheet,
  View,
  Image,
  Text
}
from 'react-native';


/**
 * Support for Hot reload
 * 
 */
const actions = [
    deviceActions, 
];

/**
 *  Instead of including all app states via ...state
 *  One could explicitly enumerate only those which Main.js will depend on.
 *
 */
function mapStateToProps(state) {
    return {
        dot: state.device.dot
    }
};

/*
 * Bind all the functions from the ```actions``` and bind them with
 * ```dispatch```

 */
function mapDispatchToProps(dispatch) {

    const creators = Map()
            .merge(...actions)
            .filter(value => typeof value === 'function')
            .toObject();

    return {
        actions: bindActionCreators(creators, dispatch),
        dispatch
    };
}

/**
 * ## App class
 */
class TabIcon extends Component {
  
  render() {

    let color = this.props.selected ? '#444444' : '#B0B0B0';
    let icon = this.props.selected ? this.props.iconName : this.props.iconName + '_normal' ;

    let iconMarginTop = 10;
    let dot = null;
    if (this.props.hasDot) {
        iconMarginTop = this.props.dot ? -1 : 10;
        dot = this.props.dot ? <Image style={{width: 6, height: 6, marginTop: 5, marginLeft: 28}} source={{uri: 'red'}} resizeMode={'contain'} /> : null;
    }
    

    return (
        <View style={{flex:1, flexDirection:'column', alignItems:'center', alignSelf:'center', height: 50}}>
            {dot}
            <Image style={{width: 20, height: 21, marginTop: iconMarginTop}} source={{uri: icon}} resizeMode={'contain'} />
            <Text style={{color: color, marginTop: 5, fontSize: 10}}>{this.props.title}</Text>
        </View>
    );
  }
};

/**
 * Connect the properties
 */
export default connect(mapStateToProps, mapDispatchToProps)(TabIcon);