import React from 'react';
import { View, Text, ScrollView, RefreshControl } from 'react-native';
import ProductTile from '../components/ProductTile';
import ProductsList from '../components/ProductsList';
import { withProductsAsSeq } from '../enhancers/productsEnhancers';
import { compose, pure, withState, withHandlers, lifecycle } from 'recompose';
import { withFilter } from '../enhancers/filterEnhancers';
import { withRouterContext } from '../enhancers/routeEnhancers';
import FullScreenMessage from '../components/FullScreenMessage';
import { withFaves } from '../enhancers/favesEnhancer';

const ProductList = props => {
	const { productsSeq, isRefreshing, onPulldown, isFilterDirty } = props;

	const refreshing = isRefreshing || !productsSeq;
	const showNoResults = !isRefreshing && isFilterDirty && productsSeq && !productsSeq.size;

	return (
		<View style={{ flex: 1 }}>
			{showNoResults && (
				<FullScreenMessage>
					<Text style={{ fontSize: 16 }}>No products matched your search.</Text>
					<Text style={{ fontSize: 16 }}>Check your filters and try again</Text>
				</FullScreenMessage>
			)}
			{!showNoResults && (
				<ScrollView
					style={{ flex: 1 }}
					refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onPulldown} />}>
					<ProductsList productsSeq={productsSeq}>
						{product => <ProductTile product={product} />}
					</ProductsList>
				</ScrollView>
			)}
		</View>
	);
};

export default compose(
	pure,
	withRouterContext,
	withProductsAsSeq,
	withFilter,
	withFaves,
	withState('isRefreshing', 'setRefreshing', false),
	withHandlers({
		onPulldown: ({ setRefreshing, onRefresh, getFaves, router }) => async () => {
			try {
				setRefreshing(true);
				await Promise.all([onRefresh(), getFaves()]);
			} catch (error) {
				console.error(error); // eslint-disable-line no-console
				router.history.push('/zipcode');
			} finally {
				setTimeout(() => setRefreshing(false), 1000);
			}
		},
	}),
	lifecycle({
		componentDidMount() {
			this.props.onPulldown();
		},
	})
)(ProductList);