import React from 'react';
import axios from 'axios';

import {
    View,
    Text,
    FlatList, // Solves the problem with the 5 movie limit in the app
  } from 'react-native';
  
  // these imports make headers and buttons look better
  import {
      Header,
      Button,
  } from 'react-native-elements';

function play(name) {
    // Play handler
    axios.get('http://192.168.1.158:8080/play/'+name)
    .then(res => {
    // Still don't care about response
    })
    
    }

class FilesScreen extends React.Component {

    constructor(props){
      super(props);
      this.state ={ data: []};
  }
    static navigationOptions = ({ navigation }) => {
      return {
        title: navigation.getParam('otherParam', 'File Selection'),
        headerStyle: {
          backgroundColor: '#3333ff',
        },
        headerTintColor: '#fff',
      };
    };
  
    componentDidMount() {
     axios.get('http://192.168.1.158:8080/list/')
     .then(res => {
       this.setState({
         data: res.data.data,
       })
     })
        
    }
      
  
  
    render() {
      let movies = this.state.data
  
      return (
      
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Pick a movie</Text>
       <FlatList
      keyExtractor={movies => movies}
      data={movies}
      renderItem={({ item }) => {
        return <Button title={item} type="outline" onPress = {() => play(item)}
    />
       }}  
      /> 
      </View>
     );
    }
  
  }

  export default FilesScreen;