import React, { Component } from 'react';
import { StyleSheet, FlatList, View, Text, TouchableHighlight } from 'react-native';

const availableZipItems = [
    { select: 'pembroke' },
    { select: 'beagle' },
    { select: 'husky' },
    { select: 'pomeranian' },
    { select: 'doberman' },
    { select: 'pug' },
    { select: 'dachshund' },
    { select: 'mix' },
    { select: 'entlebucher' },
    { select: 'keeshond' },
]
const ZipItem = ({ select, navigate }) => (
    <TouchableHighlight onPress={() => navigate('Data', { selects: select })}>
        <View style={styles.backgrund}>
            <Text style={styles.select}>{select}</Text>
        </View>
    </TouchableHighlight>
)
const _keyExtractor = item => item.select

export default class SelectScreen extends Component {
    static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: (
                <Text>
                    Choose a zip code
                </Text>),
        }
    }
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <FlatList
                    data={availableZipItems}
                    keyExtractor={_keyExtractor}
                    renderItem={({ item }) => <ZipItem {...item} navigate={navigate} />}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    select: {
        fontSize: 20,
        fontWeight: 'bold',
        textAlign: 'center'
    },
    backgrund:{
        backgroundColor: '#0099FF',
        borderRadius: 10,
        marginTop:20,
        marginLeft: 80,
        marginRight:80,
        padding: 10

    }
})