import { View, Text, Image, Pressable, Linking, Share } from 'react-native'
import React, { useEffect } from 'react'
import { useRoute } from '@react-navigation/native'
import { useFonts } from 'expo-font'
import { Ionicons, Fontisto } from '@expo/vector-icons';
import { useNavigation } from 'expo-router';
import { ScrollView } from 'react-native-gesture-handler';

const News = () => {
    useFonts({
        'playFairBold': require('../../assets/fonts/PlayfairDisplay-Bold.ttf')
    })
    const news = useRoute().params.news;
    const navigation=useNavigation();
    //share news
    const shareLink = () => {
        Share.share({url: news.url})
    }
    useEffect(() => {
        console.log(news)
    },[])
    //Time
    const publishedDate = news.publishedAt;
    const newInputDate = publishedDate.replace("T", " ").replace("Z", " ");
    //url
    const url = news.url

  return (
    <ScrollView style={{backgroundColor: "white", height: "100%"}}>
        <View style={{display: "flex", flexDirection: "row", justifyContent: "space-between", marginHorizontal: 10, marginVertical: 10}}>
            <Pressable onPress={() => navigation.goBack()} style={{display: "flex", flexDirection: "row", alignItems: 'center', gap: 5}}>
                <Ionicons name="arrow-back-outline" size={24} color="black" />
                <Text>Back</Text>
            </Pressable>
            <Pressable onPress={() => shareLink()}>
                <Fontisto name="share" size={20} color="black" />
            </Pressable>
        </View>
        <View style={{height:1, backgroundColor: "gray", marginHorizontal: 5}}></View>
        <View style={{marginHorizontal: 10, marginVertical: 20}}>
            <Text style={{fontSize: 24, fontFamily: 'playFairBold'}}>{news.title}</Text>
            <Text style={{marginTop: 20, color: "gray"}}><Text style={{fontWeight: "bold", color: "black"}}>{news.source.name} </Text>{news.author}</Text>  
            <Text style={{marginTop: 5, color: "gray"}}>{newInputDate}</Text>
        </View>
        <Image source={{uri:news.urlToImage}} style={{height: 300, marginHorizontal: 10,}}/>
        <Text style={{marginHorizontal: 10, marginTop: 40, marginBottom: 20,fontSize: 18}}>{news.description}</Text>
        <Text numberOfLines={4} style={{marginHorizontal: 10,fontSize: 18}}>{news.content}</Text>
        <Pressable onPress={() => Linking.openURL(url)} >
            <Text style={{marginTop: 20, marginHorizontal: 10,fontSize: 18, color: "gray"}}>Read More</Text>
        </Pressable>
    </ScrollView>
  )
}

export default News