content: import moment from 'moment';
  import React, { Component } from 'react';
  import {
      ScrollView,
      View,
      Text,
      StyleSheet,
  } from 'react-native';
  import RNRF, { Actions } from 'react-native-router-flux';
  import Button from 'react-native-button';
  
  class SectionItem extends Component {
  
      render() {
          return (
              <View><Text style={styles.sectionItem} >{this.props.text}</Text></View>);
      }
  }
  
  class CampeonatoItem extends Component {
  
      _onPressButton(campeonato) {
            this.props.FiltrarJogos(campeonato, -1);
  
              Actions.jogosFiltro({
                  tipo: 'campeonato',
                  filtro: campeonato,
              });
      }
  
      render() {
          return (
              <Button onPress={this._onPressButton.bind(this, this.props.campeonato.id)} >
                  <Text style={styles.itemText} >{this.props.campeonato.nome}</Text>
              </Button> );
      }
  }
  
  class CampeonatosView extends Component {
  
      _onPressButtonTodos() {
          this.props.LimparFiltroJogos();
          Actions.jogos();
      }
  
      _onPressDataFiltro(filtro, diff) {
        this.props.FiltrarJogos(-1, diff);
          Actions.jogosFiltro({
              tipo: 'data',
              filtro
          })
      }
  
      render() {
          let { campeonatos } = this.props;
          let today = moment();
          let todayOfYear = today.dayOfYear();
          let tomorrowOfYear = today.add(1, 'day')
              .dayOfYear();
          return(
              <View style={styles.container} >
                  <View style={styles.header} >
                      <Text>Lista de Campeonatos</Text>
                  </View>
                  <ScrollView style={styles.content} >
                          <Button onPress={this._onPressButtonTodos.bind(this)} >
                              <Text style={styles.itemText} >Todos</Text>
                          </Button>
                      <SectionItem text="Data" />
                          <Button onPress={this._onPressDataFiltro.bind(this, todayOfYear, 0)} >
                              <Text style={styles.itemText} >Hoje</Text>
                          </Button>
                      <Button onPress={this._onPressDataFiltro.bind(this, tomorrowOfYear, 1)} >
                              <Text style={styles.itemText} >Amanhã</Text>
                          </Button>
                      <SectionItem text="Campeonatos" />
                      {campeonatos.map( (campeonato) => <CampeonatoItem campeonato={campeonato} FiltrarJogos={this.props.FiltrarJogos}  /> )}
                  </ScrollView>
                  <View style={styles.footer} ></View>
              </View>
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
      },
      header: {
          height: 64,
          backgroundColor: 'blue',
      },
      footer: {
          height: 50,
          backgroundColor: 'blue',
      },
      content: {
          flex:1,
          paddingBottom: 56,
      },
      sectionItem: {
          backgroundColor: '#c3c3c3',
          color: '#030303',
          fontSize: 12,
          fontWeight: '600',
          lineHeight: 24,
      },
      itemText: {
          fontSize: 24,
          lineHeight: 28,
          padding: 4,
      }
  });
  
  export default CampeonatosView
  