import React, { Component } from "react";
import { StatusBar,
         View,
         Text,
         FlatList,
         StyleSheet,
         ActivityIndicator,
         ScrollView,
         Dimensions,
         TouchableOpacity,
         TextInput,
         Alert,
         AsyncStorage,
         Keyboard,
         } from "react-native";


export default class App extends React.Component {


  static navigationOptions = ({ navigation }) => {
    return {
 header: null,
}
}



 constructor(props) {

    super(props)
    this.state = {
      error: null,
      UserInput: "",
    }
  }


  GetValue = () => {

  this.setState({ loading: true})

  let userstock = this.state.UserInput;
  let path = "https://api.iextrading.com/1.0/stock/";
  let end = "/company";
  let url = path + userstock + end;

  fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          symbol: responseJson.symbol,
          company: responseJson.companyName,
          loading: false,
          dataLoaded: true,
        });
      })
      .catch((error) => {
        Alert.alert( 'Symbol not found', 'Please try again.')
        this.setState({loading: false})
      });
      Keyboard.dismiss()
  };

  FetchValue = () => {
    AsyncStorage.getItem("Favorites").then((value) => {
      this.setState({
        favs: JSON.parse(value)
      });
    }).done();
  };

  SaveValue = () => {
    const newFavs = [...this.state.favs, this.state.UserInput];
    this.setState({ favs: newFavs, UserInput: '' }, () => {
        AsyncStorage.setItem("Favorites", JSON.stringify(this.state.favs));
        Keyboard.dismiss()
    });
  };

  RemoveValue(item){
      if(item !== null &&  item !== undefined){
      const index = this.state.favs.indexOf(item);
      const newArray = [...this.state.favs];
      newArray.splice(index,1);
      this.setState({ favs: newArray });
      AsyncStorage.setItem("Favorites", JSON.stringify(newArray));
    };
  };

  render() {
    return (

        <View style={styles.container}>

        <TextInput selectionColor= '#ffffff' style={{
        height: 40, textAlign: 'center',
        color: '#000000', borderWidth: 0, width: 200,
        marginLeft: 20, alignSelf: 'center'
        }}
        onChangeText={(UserInput) => this.setState({UserInput})}
        placeholder= "Search"
        value={this.state.UserInput} />

        <TouchableOpacity
        style={styles.button}
        onPress={this.GetValue}>
        <Text style={styles.textbutton}>Search</Text>
        </TouchableOpacity>

        {this.state.loading ?
        <View style={styles.loading}>
          <ActivityIndicator
          size="large" color="#222222" />
        </View>
        : null }

        <Text style={styles.datatext}>{this.state.company}</Text>

        <TouchableOpacity
        style={styles.button}
        onPress={this.SaveValue}>
        <Text style={styles.textbutton}>Save</Text>
        </TouchableOpacity>

        <TouchableOpacity
        onPress={this.FetchValue}>
        <Text style={styles.textbutton}>Fetch</Text>
        </TouchableOpacity>

        <TouchableOpacity
        onPress={this.RemoveValue}>
        <Text style={styles.textbutton}>Remove</Text>
        </TouchableOpacity>

        <FlatList
            data={this.state.favs}
            renderItem={({ item, index }) => (
            <View style={styles.favcontainer}>
              <Text>{item}</Text>
              <TouchableOpacity
              onPress= {(item) => this.RemoveValue(item)}
              >
              <Text>Delete</Text>
              </TouchableOpacity>
            </View>
            )}
          />

        </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    margin: 25
  },
  textbutton: {
    fontWeight: '900',
    fontSize: 25,
    margin: 10,
  },
  datatext: {
    fontSize: 20,
     margin: 10,
  },
  loading: {
    margin: 40,
  },
  favcontainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'stretch',
    marginTop: 5,
    marginHorizontal: 10,
  },

});