import React from 'react';
import {
  FlatList,
  TouchableOpacity,
  StyleSheet,
  Text,
  TextInput,
  View
} from 'react-native';

export default class App extends React.Component {
  state = {
    shouldDisplayForm: false,
    text: "",
    index: 3,
    list: [
      {key: "aaaaaaa", value: "asdfasfd"},
      {key: "bbbb", value: "fsafdsa"},
      {key: "cc", value: "fasfs"}]
  }

  onButtonPress = () =>
    this.setState({ shouldDisplayForm: true });

  renderItem = (a) =>
    <View style={styles.item}>
      <Text style={styles.itemText}>{a.item.value}</Text>
    </View>;

  keyExtractor = (item, index) => item.key + index;

  onMovieAdd = () => this.setState({
    index: this.state.index + 1,
    list: [
      {
        key: this.state.index,
        value: this.state.text
      },
      ...this.state.list
    ],
    shouldDisplayForm: false,
    text: ""
  });

  onChangeText = text => this.setState({ text });

  renderList = () => (
    <View>
      <TouchableOpacity
        style={styles.button}
        onPress={this.onButtonPress}
      >
        <Text style={styles.buttonText}>Wyświetl mi forma!</Text>
      </TouchableOpacity>
      <FlatList
        style={styles.list}
        data={this.state.list}
        renderItem={this.renderItem}
        keyExtractor={this.keyExtractor}
      />
    </View>
  );

  renderForm = () => (
    <View>
      <TextInput
        style={styles.input}
        onChangeText={this.onChangeText}
        value={this.state.text}
      />
      <TouchableOpacity
        style={styles.inputButton}
        onPress={this.onMovieAdd}
      >
        <Text
          style={styles.buttonText}
        >
          Dodaj film!
          </Text>
      </TouchableOpacity>
    </View>
  );

  render() {
    const { shouldDisplayForm } = this.state;

    return (
      <View style={styles.container}>
        {!shouldDisplayForm
          ? this.renderList()
          : this.renderForm()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  input: {
    backgroundColor: '#eee',
    height: 50,
    borderRadius: 5,
    marginBottom: 10,
    paddingHorizontal: 10,
    fontSize: 18,
  },
  inputButton: {
    backgroundColor: '#0ff0ff',
    paddingHorizontal: 20,
    borderRadius: 5,
    paddingVertical: 15,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 30,
  },
  list: {
    marginTop: 30,
    display: 'flex',
    flex: 1,
    width: '100%',
    height: '100%',
  },
  item: {
    width: '100%',
    backgroundColor: '#eee',
    padding: 15,
  },
  itemText: {
    fontSize: 20,
  },
  button: {
    backgroundColor: '#fff000',
    paddingHorizontal: 20,
    borderRadius: 5,
    paddingVertical: 15,
  },
  buttonText: {
    color: '#000',
    fontSize: 20
  }
});