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

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

export default class EventListItem extends Component {
    static get propTypes() {
        return {
            end: PropTypes.string.isRequired,
            id: PropTypes.string.isRequired,
            images: PropTypes.arrayOf(
                PropTypes.shape({
                    url: PropTypes.string,
                }),
            ),
            setActiveEvent: PropTypes.func.isRequired,
            showFrom: PropTypes.string.isRequired,
            showUntil: PropTypes.string.isRequired,
            start: PropTypes.string.isRequired,
            tagline: PropTypes.string,
            name: PropTypes.string.isRequired,
        };
    }

    static get defaultProps() {
        return {
            images: null,
            isTicketed: false,
            postCount: 0,
            tagline: null,
        };
    }

    constructor(props) {
        super(props);
    }

    _viewEventDetail = () => {
        this.props.setActiveEvent(this.props.id);
        this.props.navigation.navigate('Event');
    };

    render() {
        const { date, description, end, name, start } = this.props;

        return (
            <TouchableOpacity onPress={this._viewEventDetail}>
                <View style={styles.rowContainer}>
                    <Text>{name}</Text>
                    <Text>{date}</Text>
                    <Text>
                        {start} - {end}
                    </Text>
                    <Text>{description}</Text>
                </View>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    rowContainer: {
        backgroundColor: '#FFF',
        borderRadius: 4,
        flex: 1,
        flexDirection: 'column',
        marginRight: 10,
        marginLeft: 10,
        marginTop: 10,
        padding: 10,
        shadowColor: '#CCC',
        shadowOffset: {
            width: 1,
            height: 1,
        },
        shadowOpacity: 1.0,
        shadowRadius: 1,
    },
});