import React, { PureComponent } from 'react';
import { View, StyleSheet, Image, ListView, TouchableOpacity, FlatList, Text } from 'react-native';
import PropTypes from 'prop-types';
import {WHITE, THEMECOLOR} from '../../constants/colors';

var moment = require('moment');

export default class InvitationList extends PureComponent {
  static propTypes = {
    navigation: PropTypes.object.isRequired,
    jwttoken: PropTypes.object.isRequired,
    fetchUser: PropTypes.func.isRequired,
    fetchUserProfile: PropTypes.func.isRequired,
    fetchDriverInvites: PropTypes.func.isRequired,
  }

  constructor(props) {
    super(props);

    console.log("In constructor props is ");
    console.log(this.props);
  }

  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#BEBEBE",
        }}
      />
    );
  }

  renderItem({item}) {
    console.log("In render item props is ");
    console.log(this.props);

    return (
      <InvitationListItem
        tripToFromText={item.source_city + " > " + item.destination_city}
        tripDateText={item.to_date}
        tripTimeText={item.to_date}
      />
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList style={styles.listContainer}
                  data={this.props.inviteData}
                  renderItem={this.renderItem}
                  ItemSeparatorComponent = {this.FlatListItemSeparator} />
      </View>
    );
  }
}

class InvitationListItem extends PureComponent {
  static propTypes = {
    //navigation: PropTypes.object.isRequired
  }

  render() {
    return (
      <View style={styles.listContainer}>
        <View style={styles.profileAndTripInfo}>
          <Image
            style={styles.image}
            resizeMode={"cover"}
            source={{ uri: "https://s-media-cache-ak0.pinimg.com/736x/43/cd/6e/43cd6e82491bf130d97624c198ee1a3f--funny-movie-quotes-funny-movies.jpg"}}
          />
          <View style={styles.tripInfoContainer}>
            <Text style={styles.tripToFromText}> {this.props.tripToFromText} </Text>
            <Text style={styles.tripDateText}> {moment(this.props.tripDateText).format("MMMM Do, YYYY")} </Text>
            <Text style={styles.tripTimeText}> {moment(this.props.tripDateText).format("h:mm a")} </Text>
          </View>
        </View>
        <View style={styles.redCrossButton}>
          <TouchableOpacity>
            <Image
              source={require('../../../res/invite_screen/red_cross.png')}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.greenCheckmarkButton}>
          <TouchableOpacity>
            <Image
              source={require('../../../res/invite_screen/green_checkmark.png')}
            />
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: WHITE,
  },
  listContainer: {
    flexDirection:'row',
    marginTop: 5,
    marginBottom: 5,
  },
  tripInfoContainer: {
    marginLeft: 12,
    flexDirection: 'column',
    justifyContent: 'center',
  },
  profileAndTripInfo: {
    flexDirection:'row',
  },
  tripToFromText: {
    fontWeight: 'bold',
    fontSize: 13,
  },
  tripDateText: {
    fontSize: 11
  },
  tripTimeText: {
    fontSize: 11
  },
  redCrossButton: {
    alignSelf: 'flex-end',
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 30,
    marginBottom: 30
  },
  greenCheckmarkButton: {
    alignSelf: 'flex-end',
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 30,
    marginRight: 10,
  },
  separator: {
    flex: 1,
    height: 1,
    backgroundColor: '#8E8E8E',
  },
  image: {
    height: 80,
    width: 80,
    borderRadius: 40,
    borderWidth: 1,
    borderColor: '#BEBEBE',
    marginLeft: 10
  }
});