import React from 'react'
import { 
  StyleSheet, 
  View, 
  ListView,
} from 'react-native'

import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import style from '../../../common/style'
import SessionListItem from './SessionListItem'
import SessionFilter from './SessionFilter'

import { setSelectedDay } from '../../../actions/filter'

const styles = StyleSheet.create({
  listContainer: {
    flex: 1,
    backgroundColor: style.colors.background,
  },
  textStyle: {
    color: style.colors.primary,
  },
})

class SessionList extends React.Component {

  constructor(props) {
    super(props)
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
    this.state = {
      ds: ds.cloneWithRows(this.props.sessionsData)
    }
  }
  static propTypes = {
    sessionsData: PropTypes.array,
    selectedDay: PropTypes.string,
    day1: PropTypes.string,
    day2: PropTypes.string,
    filterSessionDay: PropTypes.func,
    navigation: PropTypes.object
  };

  filterSessions() {
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.sessionsData !== nextProps.sessionsData) {
      this.setState(()=> {
        return { ds: this.state.ds.cloneWithRows(nextProps.sessionsData) }
      })
    }
  }

  render() {
    if(!this.state.ds) return null
    return (
      <View style={ styles.listContainer }>
        <SessionFilter
          day1={this.props.day1}
          day2={this.props.day2}
          onFilterDayPressed={this.props.filterSessionDay}
          onFilterSessionPressed={this.filterSessions} />
        <ListView 
          enableEmptySections={true} style={ styles.list }
          dataSource={ this.state.ds }
          renderRow={(sessionAndSlot) => {
            return (
              <SessionListItem
                onRowPressed={ (session) => {this.props.navigation.navigate('SessionDetail', { sessionData: session })}}
                session={sessionAndSlot.session} />)
          }} />
      </View>
    )
  }
}

const mapStateToProps = (state) => { 
  const sessions = (state.sessions.slots.find(s => s.day === state.filter.selectedDay) ||
    { day: state.filter.selectedDay, sessionBySlot: [] }).sessionBySlot

  return {  
    sessionsData: sessions,
    selectedDay: state.filter.selectedDay,
    day1: state.filter.days.day1,
    day2: state.filter.days.day2,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
      filterSessionDay: (day) => { dispatch(setSelectedDay(day)) }
    }
  }

export default connect(mapStateToProps, mapDispatchToProps)(SessionList)

@@ -1,12 +1,22 @@
+// @flow%0A%0A
 import React
@@ -97,17 +97,16 @@
 native'%0A
-%0A
 import %7B
@@ -304,17 +304,16 @@
 Filter'%0A
-%0A
 import %7B
@@ -362,16 +362,72 @@
 ilter'%0A%0A
+import type %7B Dispatch %7D from '../../../types/Actions'%0A%0A
 const st
@@ -453,16 +453,28 @@
 reate(%7B%0A
+  list: %7B%7D,%0A
   listCo
@@ -599,17 +599,16 @@
 ary,%0A  %7D
-,
 %0A%7D)%0A%0Acla
@@ -647,16 +647,59 @@
 ponent %7B
+%0A  state: %7B%0A    ds: ListView.DataSource%0A  %7D
 %0A%0A  cons
@@ -1838,18 +1838,16 @@
 Slot) =%3E
- %7B
 %0A       
@@ -1855,31 +1855,10 @@
     
-return (%0A             
  
+(
 %3CSes
@@ -2055,17 +2055,16 @@
        %7D
-%7D
  /%3E%0A    
@@ -2486,31 +2486,27 @@
 atch
+: Dispatch
 ) =%3E
- %7B
 %0A  
-return %7B%0A     
+(%7B
  fil
@@ -2562,26 +2562,19 @@
 (day)) %7D
-%0A    %7D%0A 
  %7D
+)
 %0A%0Aexport

enable flow in SessionList