// @flow
import React from 'react';
import { View, SafeAreaView } from 'react-native';
import Food from './Products';
import Places from './Places';
import { BottomNavigation } from 'react-native-material-ui';
import { getLocation } from '../apis/PositionApi';
import { compose, pure, withHandlers, withProps } from 'recompose';
import { withRouterContext, type routerContext } from '../enhancers/routeEnhancers';
import { pathOr } from 'ramda';
import uiTheme from '../ui-theme';
import ProfilePage from './ProfilePage';
import Faves from './Faves';
import { fetchFaves } from '../apis/FavesApi';

type Props = {
	activeTab: string,
	router: routerContext,
	setRoute: (route: string) => () => void,
	location: {
		pathname: string,
	},
};

const Nav = (props: Props) => {
	const { activeTab, setRoute, location, pushRoute } = props;
	return (
		<View style={uiTheme.listView}>
			<View style={{ flex: 1 }}>
				{activeTab === 'food' && <Food onRefresh={getLocation} />}
				{activeTab === 'places' && <Places onRefresh={getLocation} />}
				{activeTab === 'faves' && <Faves onRefresh={fetchFaves} />}
				{activeTab === 'profile' && <ProfilePage />}
			</View>
			<SafeAreaView>
				<BottomNavigation active={activeTab}>
					<BottomNavigation.Action
						key="food"
						icon="widgets"
						label="Products"
						onPress={setRoute('/list/food')}
						style={{
							container: {
								minWidth: 40,
							},
						}}
					/>
					{/* <BottomNavigation.Action
						key="places"
						icon="store"
						label="Places"
						onPress={setRoute('/list/places')}
						style={{
							container: {
								minWidth: 40,
							},
						}}
					/> */}
					{/* <BottomNavigation.Action
						key="add"
						icon="add-circle"
						label="Add"
						onPress={pushRoute(`/createProduct?backto=${location.pathname}`)}
						style={{
							container: {
								minWidth: 40,
							},
						}}
					/> */}
					<BottomNavigation.Action
						key="faves"
						icon="favorite"
						label="Faves"
						onPress={pushRoute('/list/faves')}
						style={{
							container: {
								minWidth: 40,
							},
						}}
					/>
					<BottomNavigation.Action
						key="profile"
						icon="person"
						label="Profile"
						onPress={setRoute('/list/profile')}
						style={{
							container: {
								minWidth: 40,
							},
						}}
					/>
				</BottomNavigation>
			</SafeAreaView>
		</View>
	);
};

export default compose(
	pure,
	withRouterContext,
	withProps((props: Props) => {
		const activeTab = pathOr('food', ['router', 'route', 'match', 'params', 'type'], props);
		return { activeTab };
	}),
	withHandlers({
		setRoute: (props: Props) => (route: string) => () => {
			props.router.history.replace(route);
		},
		pushRoute: (props: Props) => (route: string) => () => {
			props.router.history.push(route);
		},
	})
)(Nav);