import React, { Component } from 'react'
import { ListView } from 'react-native';
import { connect } from 'react-redux';
import { View } from 'native-base';
import { reminderFetch, reminderDelete } from './../actions';
import ReminderListItem from './../components/ReminderListItem';
import realm from './../Database';

class ReminderList extends Component {

    componentWillMount() {
        this.props.reminderFetch()
        this.createDataSource(this.props)
    }

    componentWillReceiveProps(nextProps) {
        // nextProps are the next set of props that this component
        // will be rendered with
        // this.props is still the old set of props
        this.createDataSource(nextProps);
    }

    createDataSource({ reminders }) {
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.dataSource = ds.cloneWithRows(reminders.reminders);
    }

    renderRow({ id, medName, reminderTime, meal, period, dose }) {
        let reminder = { id, medName, reminderTime: reminderTime.toString(), meal, period, dose }
        return <ReminderListItem data={reminder} />
    }

    render() {
        return (
            <View>
                <ListView
                    enableEmptySections
                    dataSource={this.dataSource}
                    renderRow={this.renderRow}
                />
            </View>
        )
    }

}

const mapStateToProps = state => {
    return { reminders: state.reminders }
};

export default connect(mapStateToProps, { reminderFetch, reminderDelete })(ReminderList);