import { View, Text, ScrollView, ActivityIndicator} from 'react-native';
import React, { useEffect, useState } from 'react';
import HomeCategory from "../Components/HomeCategory";
import HomeTopHeadline from "../Components/HomeTopHeadline";
import HomeHeadlineList from "../Components/HomeHeadlineList";
import {useFonts} from 'expo-font'
import globalAPI from '../Service/globalAPI';

const Home = () => {
  useFonts({
    'playFairBold': require('../../assets/fonts/PlayfairDisplay-Bold.ttf')
  })

  const [newsList, setNewsList] = useState([]);
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    getTopHeadline();
    getByCategory('latest');
  }, [])
  //get all
  const getTopHeadline = async() => {
    const result = (await globalAPI.getTopHeadline).data;
    setNewsList(result.articles)
  }
  //get by category
  const getByCategory = async(category) => {
    setLoading(true);
    const result = (await globalAPI.getByCategory(category)).data;
    setNewsList(result.articles)
    setLoading(false);
  }

  return (
    <ScrollView style={{backgroundColor: "white"}}>
      {loading? < ActivityIndicator size={'large'} style={{color: "gray"}}/> : 
      <View>
        <Text style={{marginTop: 10, fontSize: 32, fontFamily: 'playFairBold', color: "#000000", textAlign: "center", marginBottom: 20}}>The Quick News</Text>
        <HomeCategory selectCategory={(category) => getByCategory(category)}/>
        <HomeTopHeadline newsList={newsList}/>
        <HomeHeadlineList newsList={newsList}/>
      </View>
      }
    </ScrollView>
  )
}

export default Home