import React from 'react';
import { AsyncStorage, Button, Text, View, TextInput, ScrollView, KeyboardAvoidingView, StyleSheet, ActivityIndicator, Image } from 'react-native';
import data from './Recipes.json';

class RecipeScreen extends React.Component {

    constructor(props) {
      const { navigation } = props;

      super()
      this.state = {
        isLoading: true,
        title: navigation.getParam('title', 'title'),
        image: navigation.getParam('image', 'image'),
        comments: "",
        url: 'https://api.myjson.com/bins/qs7o4',
        TextInputValue: '',
        NameInputValue: '',
      }

    }
    componentDidMount() {
        this.loadComments();
        return fetch(this.state.url)
            .then( (response) => response.json() )
            .then( (responseJson) => {

              this.setState({
                isLoading: false,
                recipes: responseJson,
              });

            })

          .catch((error) => {
            console.log(error)
          });
      }

    loadComments = async () => {
        await AsyncStorage.getItem(this.state.title, (err, comment) => this.setState({comments: comment})).catch(err => {alert.message(err.message)});
    }

    buttonClickListener = () => {
      comments = this.state.comments;
      let name = this.state.NameInputValue;
      let comment = this.state.TextInputValue;

      if (comments !== null) {
        comments += '\n';
        name = name === '' ? "Anonimas: " : name + ": ";
        comments += name + comment;
      } else {
        name = name === '' ? "Anonimas: " : name + ": ";
        comments = name + comment;
      }

      AsyncStorage.setItem(this.state.title, comments);
      this.setState({
        comments: comments,
        TextInputValue: '',
        NameInputValue: '',
      });
    }

    render() {
      /* If data not loaded create loading circle in midle screen*/
      if (this.state.isLoading) {
        return (
          <View style = { styles.center }>
            <ActivityIndicator size = "small" color = "#00ff00" />
          </View>
        )
      }

      let ingredients = this.state.recipes.recipes.map((val, key) => {
        let ingredientArr = null;

        if ( val.title === this.state.title ) {
            ingredientArr = val.ingredientList.map((val, key) => {
                return  <Text key={key} style={ styles.ingredientText }>
                            { val }
                        </Text>
            });
        }

        return ingredientArr;
      });

      let preperation = this.state.recipes.recipes.map((val, key) => {
        let preparationArr = null;

        if ( val.title === this.state.title ) {
            preparationArr = val.preperation.map((val, key) => {
                return  <Text key={key} style={ styles.ingredientText }>
                            { val }
                        </Text>
            });
        }
        return preparationArr;
      });

      return (
        <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled keyboardVerticalOffset={80}>
          <ScrollView style={{ flex: 1, flexDirection: 'column' }}>

            <View style={{ flex: 1, alignItems: 'center' }}>
              <Text style={{ fontWeight: 'bold', fontSize: 24, textAlign: 'center' }}> { this.state.title } </Text>
            </View>

            <View style={{ flex: 4, alignItems: 'center', justifyContent: 'center' }}>
              <Image style={{ width: 350, height: 200 }} source={{ uri: this.state.image }} />
            </View>

            <View style={{ flex: 5, flexDirection: 'column', paddingLeft: 13 }}>

              <View style={{ flex: 1 }}>

                <Text style={ styles.subtitleText }>Ingrediantai</Text>
                { ingredients }

              </View>

              <View style={{ flex: 1 }}>

                <Text style={styles.subtitleText}>Paruo6imo budas:</Text>
                { preperation }

              </View>

            </View>

            <View style={{ flex: 1, paddingLeft: 13 }}>
              <Text style={ styles.titleText }>Komentarai:</Text>
            </View>

            <View style={{ flex: 1, paddingLeft: 13 }}>
              <Text>
                { this.state.comments }
              </Text>
            </View>

            <View style={{ flex: 1}}>

            <TextInput
              style={{ height: 45, paddingLeft: 13}}
              placeholder='Vardas'
              multiline={false}
              onChangeText={NameInputValue => this.setState({NameInputValue})}
              value={this.state.NameInputValue}
              />

              <TextInput
              style={{ height: 50, paddingLeft: 13}}
              placeholder='Komentaras'
              multiline={true}
              onChangeText={TextInputValue => this.setState({TextInputValue})}
              value={this.state.TextInputValue}
              />

              <Button
              title='Komentuoti'
              color='green'
              onPress={this.buttonClickListener}
              />

            </View>

          </ScrollView>
        </KeyboardAvoidingView>
      );
    }
}

export default RecipeScreen;

const styles = StyleSheet.create({
    titleText: {
        fontWeight: 'bold',
        fontSize: 24,
      },

      subtitleText: {
        fontWeight: 'bold',
        fontSize: 18,
        marginBottom: 50,
      },

      ingredientText: {
        fontSize: 16,
        marginBottom: 10,
      },

});