import React from 'react';
import { StyleSheet, Text, View, Button, Alert, TextInput, Image, AsyncStorage, FlatList } from 'react-native';

export default class App extends React.Component {

  // Seperator styling code modified from this source: https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6

  constructor(props)
  {
    super(props);
    this.state = {data: [], search: ''}
  }

  getData = () =>
  {
    const url = "http://www.recipepuppy.com/api/?i=" + this.state.search
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) =>
    {
      this.setState({
        data: responseJson.results
      })
    })
    .catch((error) =>
    {
        Alert.alert("Computer machine broke!")
    })
  }

  renderSeparator = () => {
    return (
        <View
            style={{
                height: 1,
                width: "100%",
                backgroundColor: "black"
            }}
        />
        );
    };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={{marginTop: "10%", marginLeft: "25%", marginRight: "25%"}}
          keyExtractor={item => item.href}
          renderItem={({item}) => <View><Image source={{uri: item.thumbnail}} style={{width: 50, height: 50, borderColor: 'black'}}/><Text>{item.title}</Text></View>}
          ItemSeparatorComponent={this.renderSeparator}
          data={this.state.data}
        />
        <TextInput style={{width: 200, borderColor: 'grey', borderWidth: 1}} onChangeText={(search) => this.setState({search})}  value={this.state.search}/>
        <Button onPress={this.getData} title="Search for Recipes"/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightblue',
    alignItems: 'center',
    justifyContent: 'center',
  },
  thumbnails: {

  },
});