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

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

import GallerySwiper from 'react-native-gallery-swiper';

import AuctionPriceAndBidCount from './AuctionPriceAndBidCount.container.js';
import BidStatus from './BidStatus.container.js';

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

export default class AuctionListItem 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: PropTypes.string.isRequired,
            startingPrice: PropTypes.number.isRequired,
            subtitle: PropTypes.string,
            title: PropTypes.string.isRequired,
            type: PropTypes.string.isRequired,
        };
    }

    static get defaultProps() {
        return {
            description: null,
            donor: null,
            images: null,
            subtitle: null,
        };
    }

    constructor(props) {
        super(props);
    }

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

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

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

        return (
            <TouchableOpacity onPress={this._viewItemDetail}>
                <View style={styles.rowContainer}>
                    {images !== null && images.length > 0 && (
                        <GallerySwiper
                            enableScale={false}
                            images={images}
                            initialNumToRender={2}
                            resizeMode="cover"
                            sensitiveScroll={false}
                            style={{ height: 280 }}
                        />
                    )}
                    <View style={styles.rowText}>
                        {type === ITEM_TYPES.AUCTION && <BidStatus itemId={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 itemId={id} />
                        ) : (
                            <Text style={styles.price} numberOfLines={1} ellipsizeMode="tail">
                                {formatPrice(startingPrice)}
                            </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,
        flex: 1,
        flexDirection: 'column',
        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,
    },
});