import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ScrollView, FlatList, TouchableWithoutFeedback, TouchableHighlight  , Alert} from 'react-native';
import {Header, TopNavigationButton, TopNavigationButtonUnchosen}  from './components';



type Props = {};
export default class App extends Component<Props> {


constructor(props) {
  super(props);
  this.state = {
    topNavigationOptions : [
      {key: 'Quick Search'},
      {key: 'Person Search'},],
    chosenTopNavigation:
      "Quick Search"
  };


}


renderItem = ({item}) => {
  if (item.key == this.state.chosenTopNavigation) {
    return (
      <TouchableWithoutFeedback onPress = { () => this.setState({chosenTopNavigation: item.key}) }  >
        <TopNavigationButton >
          {item.key}
        </TopNavigationButton>
      </TouchableWithoutFeedback>
      )
  } else {
    return (
      <TouchableWithoutFeedback onPress = { () => this.setState({chosenTopNavigation: item.key}) }>




        //if i use a standard Text component, it swiches state and rerenders just fine, but with my View it does not work.
        <TopNavigationButtonUnchosen>
          {item.key}
        </TopNavigationButtonUnchosen>
      </TouchableWithoutFeedback>
    )
  }
}


  render() {
    return (
      <View>

        <TouchableHighlight onPress= {this._onPressButton}>
          <Header>Kopf</Header>
        </TouchableHighlight>


        <ScrollView horizontal = {true}>
          <View style = {styles.navigationContainer}>
            <TopNavigationButton>Quick Search</TopNavigationButton>
            <Text style = {styles.unchosenTextStyle}>Person Search</Text>
          </View>
        </ScrollView>
      <View styles = {styles.navigationContainer}>
        <FlatList
          horizontal
          extraData = {this.state.chosenTopNavigation}
          data={this.state.topNavigationOptions}
          renderItem = {this.renderItem.bind(this)}
        />
      </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({


  navigationContainer: {
    marginLeft: 20,
    marginTop: 15,
    flexDirection: 'row',
    alignItems: 'center',
  },
  unchosenTextStyle: {
    fontSize: 17,
    ...Platform.select({
      ios: {
          fontFamily: "OpenSans-Bold"
      },
      android: {
          fontFamily: "opensansBold"
      }
    }),
    color: '#9AA5B1',
    marginLeft: 20
  }
});