import React, { Component } from 'react';
import { Text, Image, View } from 'react-native';
import styles from './styles/ResultsScreenStyle';
import { StackNagivator } from 'react-navigation';
import GeneralButton from '../components/GeneralButton';
import buttonStyles from '../components/styles/ButtonStyle';
import LaunchScreen from './LaunchScreen';

export default class ResultsScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
    }
  }

  componentDidMount() {
    return fetch('http://localhost:3000/games/'+this.props.navigation.state.params.game_id+'/paths.json')
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        pathsObject: responseJson,
      })
    })
    .catch((error) => {
      console.error(error);
    })
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View>
          <Text>Loading...</Text>
        </View>
      )
    }

    const { navigate } = this.props.navigation;
      return (
        <View style={styles.endingPaths}>
          <View>
            {
              this.state.pathsObject.paths_chosen.map(function(path, index) {
                return (
                  <Text key={index}>{path.name}</Text>
                )
              })
            }
          </View>
          <View>
            <GeneralButton text='Restart' textStyle={buttonStyles.generalButtonText} touchStyle={buttonStyles.generalButton} onPress={() => navigate('LaunchScreen')} />
          </View>
        </View>
      )
  }
}

@@ -61,16 +61,26 @@
 ge, View
+, FlatList
  %7D from 
@@ -796,24 +796,67 @@
 n,%0A      %7D)%0A
+      console.log(this.state.pathsObject);%0A
     %7D)%0A    .
@@ -914,16 +914,353 @@
 %7D)%0A  %7D%0A%0A
+  renderItem(%7B item, index %7D) %7B%0A    return (%0A      %3CText%3E%7Bitem.name%7D%3C/Text%3E%0A    );%0A  %7D%0A%0A  renderRestartButton() %7B%0A    return (%0A      %3CView%3E%0A        %3CGeneralButton text='Restart' textStyle=%7B buttonStyles.generalButtonText %7D touchStyle=%7B buttonStyles.generalButton %7D onPress=%7B () =%3E navigate('LaunchScreen') %7D /%3E%0A      %3C/View%3E%0A    );%0A  %7D%0A%0A
   render
@@ -1525,17 +1525,58 @@
         
-%7B
+%3CFlatList%0A              key=%7B'PathsTaken'%7D
 %0A       
@@ -1577,24 +1577,31 @@
             
+ data=%7B
  this.state.
@@ -1628,151 +1628,116 @@
 osen
-.map(function(path, index) %7B%0A                return (%0A                  %3CText key=%7Bindex%7D%3E%7Bpath.name%7D%3C/Text%3E%0A                )%0A              %7D)
+ %7D%0A              renderItem=%7B this.renderItem %7D%0A              ListHeaderComponent=%7Bthis.renderRestartButton%7D
 %0A   
@@ -1745,17 +1745,18 @@
         
-%7D
+/%3E
 %0A       
@@ -1832,24 +1832,25 @@
  textStyle=%7B
+ 
 buttonStyles
@@ -1867,16 +1867,17 @@
 ttonText
+ 
 %7D touchS
@@ -1882,16 +1882,17 @@
 hStyle=%7B
+ 
 buttonSt
@@ -1909,16 +1909,17 @@
 alButton
+ 
 %7D onPres
@@ -1921,16 +1921,17 @@
 nPress=%7B
+ 
 () =%3E na
@@ -1952,16 +1952,17 @@
 Screen')
+ 
 %7D /%3E%0A   

Add flatlist to view paths with restartbutton as header