import React from 'react';
import { View } from 'react-native';
import { pure } from 'recompose';
import ProductRecord from '../records/ProductRecord';
import theme from '../ui-theme';
import { Link } from 'react-router-native';
import { routeWithTitle } from '../helpers/RouteHelpers';
import { TileBox, StrongText, SubText, Thumbnail, QuantityLine } from './ItemTile';
import { withPlace } from '../enhancers/placeEnhancers';

const PlaceNameAndDistance = withPlace(({ place }) => {
	return (
		<SubText>{`${(place && place.name) || 'Loading...'} - ${parseFloat(place.distance).toFixed(
			1
		)} mi`}</SubText>
	);
});

const EmptyProductTile = () => {
	return (
		<View>
			<TileBox>
				<Thumbnail thumb={null} />
				<View>
					<StrongText>Loading...</StrongText>
				</View>
			</TileBox>
		</View>
	);
};

export default pure(({ product }: { product: ProductRecord }) => {
	if (!product) {
		return <EmptyProductTile />;
	}

	return (
		<Link
			to={routeWithTitle(`/product/${product.id || ''}`, product.name)}
			underlayColor={theme.itemTile.pressHighlightColor}>
			<View>
				<TileBox>
					<Thumbnail thumb={product.thumbImage} />
					<View>
						<StrongText>{product.name || ''}</StrongText>
						<PlaceNameAndDistance placeId={product.placeId} placeType={product.placeType} />
						<QuantityLine quantity={product.quantity} lastupdated={product.lastupdated} />
					</View>
				</TileBox>
			</View>
		</Link>
	);
});