// @flow

import * as React from 'react'
import {View, Text, StyleSheet, Platform} from 'react-native'
import Icon from 'react-native-vector-icons/Entypo'
import type {ViewType} from '../views'
import LinearGradient from 'react-native-linear-gradient'
import {Touchable} from '../components/touchable'
import * as c from '../components/colors'

type Props = {
	view: ViewType,
	onPress: () => any,
}

export function HomeScreenButton({view, onPress}: Props) {
	const touchableProps = {
		accessibilityComponentType: 'button',
		accessibilityLabel: view.title,
		accessibilityTraits: 'button',
		highlight: false,
		onPress: onPress,
	}

	if (view.gradient) {
		return (
			<Touchable {...touchableProps}>
				<LinearGradient
					colors={view.gradient}
					end={{x: 1, y: 0.85}}
					start={{x: 0, y: 0.05}}
					style={styles.rectangle}
				>
					<Icon name={view.icon} size={32} style={styles.rectangleButtonIcon} />
					<Text style={styles.rectangleButtonText}>{view.title}</Text>
				</LinearGradient>
			</Touchable>
		)
	}

	return (
		<Touchable {...touchableProps}>
			<View style={[styles.rectangle, {backgroundColor: view.tint}]}>
				<Icon name={view.icon} size={32} style={styles.rectangleButtonIcon} />
				<Text style={styles.rectangleButtonText}>{view.title}</Text>
			</View>
		</Touchable>
	)
}

export const CELL_MARGIN = 10
const cellVerticalPadding = 8
const cellHorizontalPadding = 4

const styles = StyleSheet.create({
	// Main buttons for actions on home screen
	rectangle: {
		alignItems: 'center',
		justifyContent: 'center',

		paddingTop: cellVerticalPadding,
		paddingBottom: cellVerticalPadding / 2,
		paddingHorizontal: cellHorizontalPadding,
		borderRadius: Platform.OS === 'ios' ? 6 : 3,

		elevation: 2,

		marginBottom: CELL_MARGIN,
		marginLeft: CELL_MARGIN / 2,
		marginRight: CELL_MARGIN / 2,
	},

	// Text styling in buttons
	rectangleButtonIcon: {
		color: c.white,
		backgroundColor: c.transparent,
	},
	rectangleButtonText: {
		color: c.white,
		backgroundColor: c.transparent,
		fontFamily: Platform.OS === 'ios' ? 'System' : 'sans-serif-condensed',
		fontSize: 14,
	},
})

@@ -458,182 +458,204 @@
  %7B%0A%09
-const touchableProp
+let content
 s = 
-%7B%0A%09%09accessibilityComponentType: 'button',%0A%09%09accessibilityLabel: view.title,%0A%09%09accessibilityTraits: 'button',%0A%09%09highlight: false,%0A%09%09onPress: onPress,%0A%09%7D
+(%0A%09%09%3CReact.Fragment%3E%0A%09%09%09%3CIcon name=%7Bview.icon%7D size=%7B32%7D style=%7Bstyles.rectangleButtonIcon%7D /%3E%0A%09%09%09%3CText style=%7Bstyles.rectangleButtonText%7D%3E%7Bview.title%7D%3C/Text%3E%0A%09%09%3C/React.Fragment%3E%0A%09)
 %0A%0A%09i
@@ -680,53 +680,21 @@
 %7B%0A%09%09
-return (%0A%09%09%09%3CTouchable %7B...touchableProps%7D%3E%0A%09
+contents = (%0A
 %09%09%09%3C
@@ -708,17 +708,16 @@
 radient%0A
-%09
 %09%09%09%09colo
@@ -739,17 +739,16 @@
 nt%7D%0A%09%09%09%09
-%09
 end=%7B%7Bx:
@@ -757,25 +757,24 @@
 , y: 0.85%7D%7D%0A
-%09
 %09%09%09%09start=%7B%7B
@@ -789,17 +789,16 @@
  0.05%7D%7D%0A
-%09
 %09%09%09%09styl
@@ -825,242 +825,74 @@
 %0A%09%09%09
-%09
 %3E%0A%09%09%09%09
-%09%3CIcon name=%7Bview.icon%7D size=%7B32%7D style=%7Bstyles.rectangleButtonIcon%7D /%3E%0A%09%09%09%09%09%3CText style=%7Bstyles.rectangleButtonText%7D%3E%7Bview.title%7D%3C/Text%3E%0A%09%09%09%09%3C/LinearGradient%3E%0A%09%09%09%3C/Touchable%3E%0A%09%09)%0A%09%7D%0A%0A%09return (%0A%09%09%3CTouchable %7B...touchableProps%7D%3E
+%7Bcontents%7D%0A%09%09%09%3C/LinearGradient%3E%0A%09%09)%0A%09%7D else %7B%0A%09%09contents = (
 %0A%09%09%09
@@ -963,154 +963,226 @@
 %09%09%09%09
-%3CIcon name=%7Bview.icon%7D size=%7B32%7D style=%7Bstyles.rectangleButtonIcon%7D /%3E%0A%09%09%09%09%3CText style=%7Bstyles.rectangleButtonText%7D%3E%7Bview.title%7D%3C/Text%3E%0A%09%09%09%3C/View%3E
+%7Bcontents%7D%0A%09%09%09%3C/View%3E%0A%09%09)%0A%09%7D%0A%0A%09return (%0A%09%09%3CTouchable%0A%09%09%09accessibilityComponentType=%22button%22%0A%09%09%09accessibilityLabel=%7Bview.title%7D%0A%09%09%09accessibilityTraits=%22button%22%0A%09%09%09highlight=%7Bfalse%7D%0A%09%09%09onPress=%7BonPress%7D%0A%09%09%3E%0A%09%09%09%7Bcontents%7D
 %0A%09%09%3C

rework the home button to reduce duplication