import { List } from 'immutable';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { FlatList, StyleSheet, Text, View } from 'react-native';

import EventListItem from '../components/Events/EventListItem.js';

export default class Events extends Component {
    static get propTypes() {
        return {
            events: PropTypes.instanceOf(List),
            fetchEvents: PropTypes.func.isRequired,
            setActiveEvent: PropTypes.func.isRequired,
        };
    }

    static get defaultProps() {
        return {
            events: new List(),
        };
    }

    constructor(props) {
        super(props);

        this._setActiveEvent = this.setActiveEvent.bind(this);
    }

    componentDidMount() {
        this.props.fetchEvents();
    }

    setActiveEvent(eventId) {
        this.props.setActiveEvent(eventId);
    }

    _keyExtractor = (event, index) => `${event.id}_${index}`;

    _renderEventListItem = ({ event }) => (
        <EventListItem {...event} setActiveEvent={this.setActiveEvent} />
    );

    render() {
        const { events } = this.props;

        return (
            <View style={styles.container}>
                {events.size > 0 && (
                    <FlatList
                        data={events}
                        keyExtractor={this._keyExtractor}
                        renderItem={this._renderEventListItem}
                        contentContainerStyle={styles.eventListContentContainer}
                        style={styles.eventList}
                    />
                )}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    eventListContentContainer: {},
});