import React from 'react';
import { Image ,View,List,FlatList} from 'react-native';
import {AppLoading, Font} from 'expo';
import MaterialCommunityIcons  from '@expo/vector-icons';
import  News from './News'

import { Container,Item,Input, Header, Content, Card, CardItem, Thumbnail, Icon,Text, Button, Left, Body, Right } from 'native-base';
export default class NewsFeed extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: true,
            page: 1
        };
        this.getAutoFeed();
      }

     getAutoFeed() {
        return fetch('https://newsapi.org/v2/everything?q=cannabis&sortBy=publishedAt&apiKey=27b1324537e14a72b461e9cf8801abff&page='+this.state.page)
          .then((response) => response.json())
          .then((responseJson) => {
            console.log(responseJson);
            this.setState(
                {
                    data : responseJson.articles,
                    loading : false
                }
            );
          })
          .catch((error) => {
            console.log(error);

            console.error(error);
          });
      }

    handleLoadMore() {
        this.setState({
            page: this.state.page + 1,
        }, () => {
            this.getAutoFeed();
        }
    )
    }


  render() {

    return (
    <View>

                <List>
                <FlatList
                  data={this.state.data}
                  keyExtractor={item => item.url}
                  onEndReached= {this.handleLoadMore}
                  onEndThreshold={5}
                  renderItem={({ item }) => (
                    <News thumbnail={{ uri: "https://scontent.flim5-4.fna.fbcdn.net/v/t1.0-9/10622895_10152268496932606_2476213355342926994_n.jpg?oh=26e87559282f220962987b361f11152f&oe=5AFBED0D"}}
                        title={item.tittle}
                        bodyImg= { {uri: item.urlToImage}}
                        date={item.publishedAt}
                        description  = {item.description}
                    />
                  )}
                />
              </List>




    </View>


    );
  }
}