import React, { Component } from 'react';
import { StyleSheet, View } from "react-native";
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Map } from 'immutable';
import LoadingIndicator from '../../common/components/LoadingIndicator';

import * as talentRankActions from '../reducers/talentRank/talentRankActions';
import TalentRank from '../components/TalentRank';

const actions = [
  talentRankActions,
];

function mapStateToProps(state) {
  return {
      ...state
  };
}

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

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

class TalentRankContainer extends Component {
  constructor(props) {
    super(props);
  
    this.state = {};
  }

  render() {
    let isFetching = this.props.talentRank.isFetching;
    return (
      <View style={styles.container}>
        <LoadingIndicator isVisible={isFetching}/>
        <TalentRank actions={this.props.actions} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(TalentRankContainer);