// @flow
import React from "react";
import { View, Text, AsyncStorage } from "react-native";
// import atcCookieImage from '../imgs/atc-cookie-logo.png';
import { Link } from "react-router-native";
import RouterButton from "react-router-native-button";
import { compose, withHandlers, withState } from "recompose";
import { withRouterContext } from "../enhancers/routeEnhancers";

import theme from "../ui-theme";

type Props = {
	skipIfAlreadyChosen: () => void,
	setLoading: (val: boolean) => void,
	loading: boolean,
	router: {
		history: {
			replace: (route: string) => void
		}
	}
};

const LandingPage = ({ skipIfAlreadyChosen, loading }: Props) => {
	if (loading) {
		skipIfAlreadyChosen();
		return null;
	}

	return (
		<View
			style={{
				flexDirection: "column",
				alignItems: "center",
				justifyContent: "center",
				flex: 1,
				height: "100%"
			}}
		>
			{/* <Image
				source={atcCookieImage}
				style={{ height: 320, marginBottom: 10 }}
				resizeMode="contain"
			/> */}
			<Text style={{ fontSize: 24, marginBottom: 30, textAlign: "center", width: 330 }}>
				We need to use your location to bring you the best experience possible.
			</Text>
			<View style={{ width: 275, marginBottom: 30 }}>
				<RouterButton to="/list/food" replace title="OK, fine" color={theme.palette.primaryColor} />
			</View>
			<Link to="/zipcode" replace>
				<Text style={{ color: theme.palette.primaryColor, marginBottom: 20, fontSize: 16 }}>
					I'd rather not.
				</Text>
			</Link>
		</View>
	);
};

export default compose(
	withRouterContext,
	withState("loading", "setLoading", true),
	withHandlers({
		skipIfAlreadyChosen: (props: Props) => async () => {
			const zipcode = await AsyncStorage.getItem("zipcode");
			if (zipcode) {
				props.router.history.replace("/list/food");
			} else {
				props.setLoading(false);
			}
		}
	})
)(LandingPage);