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 {
      description: PropTypes.string.isRequired,
      endTime: PropTypes.string.isRequired,
      id: PropTypes.string.isRequired,
      images: PropTypes.arrayOf(
        PropTypes.shape({
          url: PropTypes.string,
        }),
      ),
      isTicketed: PropTypes.bool,
      postCount: PropTypes.number,
      setActiveEvent: PropTypes.func.isRequired,
      showFrom: PropTypes.string.isRequired,
      showUntil: PropTypes.string.isRequired,
      startTime: PropTypes.string.isRequired,
      tagline: PropTypes.string,
      title: PropTypes.string.isRequired,
    };
  }

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

  constructor(props) {
    super(props);
  }

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

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

    return(
      <TouchableOpacity onPress={this._viewEventDetail}>
        <View style={styles.rowContainer}>
        </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,
  },
});