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

import AuctionPriceAndBidCount from '../../containers/Auction/AuctionPriceAndBidCount.js';
import BidStatus from '../../containers/Auction/BidStatus.js';

import { ITEM_TYPES } from '../../constants/constants.js';
import { formatPrice, getAuctionTime } from '../../library/helpers.js';

export default class ItemRow extends Component {
  static get propTypes() {
    return {
      description: PropTypes.string,
      donor: PropTypes.string,
      end: PropTypes.string.isRequired,
      id: PropTypes.string.isRequired,
      images: PropTypes.arrayOf(
        PropTypes.shape({
          url: PropTypes.string,
        }),
      ),
      start: PropTytpes.string.isRequired,
      startPrice: PropTypes.number,
      subtitle: PropTypes.string,
      title: PropTypes.string.isRequired,
      type: PropTypes.string.isRequired,
    };
  }

  _getBidTime = () => {
    const { end, start } = this.props;
    return getAuctionTime({ end, start });
  }

  _viewItemDetail = () => {
    const { id } = this.props.details;
    this.props.navigation.navigate('Item', { id });
  }

  render() {
    const {
      description,
      donor,
      end,
      images,
      start,
      startPrice,
      subtitle,
      title,
      type,
    } = this.props;

    return(
      <TouchableOpacity onPress={this._viewItemDetail}>
        <View style={styles.rowContainer}>
          <Image
            source={{uri: images[0].url}}
            style={styles.image}
            resizeMode="contain"
          />
          <View style={styles.rowText}>
            {type === ITEM_TYPES.AUCTION && <BidStatus id={item.id} />}
            <Text style={styles.title} numberOfLines={2} ellipsizeMode={'tail'}>
              {title}
            </Text>
            <Text style={styles.subtitle} numberOfLines={1} ellipsizeMode={'tail'}>
              {subtitle}
            </Text>
            {donor && (
              <Text style={styles.donor} numberOfLines={1} ellipsizeMode={'tail'}>
                {donor}
              </Text>
            )}
            {type === ITEM_TYPES.AUCTION ? (
              <AuctionPriceAndBidCount id={item.id} />
            ) : (
              <Text style={styles.price} numberOfLines={1} ellipsizeMode={'tail'}>
                {formatPrice(startPrice)}
              </Text>
            )}
            <Text style={styles.timeline} numberOfLines={1}>
              {this._getBidTime()}
            </Text>
            <Text style={styles.description} numberOfLines={3} ellipsizeMode={'tail'}>
              {description}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  description: {
    color: '#777',
    fontSize: 14,
    marginTop: 5,
    paddingLeft: 10,
    paddingRight: 10,
  },
  donor: {
    color: '#777',
    fontSize: 14,
    marginTop: 5,
    paddingLeft: 10,
  },
  image: {
    flex: 1,
    height: undefined,
    width: undefined,
  },
  price: {
    color: '#777',
    fontSize: 16,
    fontWeight: 'bold',
    paddingLeft: 10,
    paddingTop: 5,
  },
  rowContainer: {
    backgroundColor: '#FFF',
    borderRadius: 4,
    flexDirection: 'row',
    height: 100,
    marginRight: 10,
    marginLeft: 10,
    marginTop: 10,
    padding: 10,
    shadowColor: '#CCC',
    shadowOffset:{  width: 1,  height: 1,  },
    shadowOpacity: 1.0,
    shadowRadius: 1,
  },
  rowText: {
    flex: 4,
    flexDirection: 'column',
  },
  subtitle: {
    color: '#777',
    fontSize: 14,
    marginTop: 5,
    paddingLeft: 10,
  },
  timeline: {
    color: '#777',
    fontSize: 14,
    marginTop: 5,
    paddingLeft: 10,
    paddingRight: 10,
  },
  title: {
    color: '#777',
    fontSize: 16,
    fontWeight: 'bold',
    paddingLeft: 10,
    paddingTop: 5,
  },
});