import React, { useContext, useEffect, useState } from "react";
import { View, Text, Image, StyleSheet } from "react-native";
import { AuthContext } from "../context/AuthContext";
import { singlePostApi } from "../service/post";
import { globalStyles } from "../styles/global";
import { windowWidth } from "../utils/Dimensions";

const PostDetailsScreen = ({ navigation, route }) => {
  const { userInfo } = useContext(AuthContext);
  const [post, setPost] = useState({});

  const fetchPost = async () => {
    if (userInfo.jwt && route.params.id) {
      singlePostApi(userInfo.jwt, route.params?.id)
        .then((res) => setPost(res.data))
        .catch((e) => console.log(e));
    }
  };

  useEffect(() => {
    fetchPost();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <Image
        style={styles.image}
        source={{
          uri: `http://localhost:1337${post?.attributes?.profileImage.data.attributes.url}`,
        }}
      />
      <Text style={[globalStyles.boldText, styles.title]}>
        {post?.attributes?.title}
      </Text>
        <Text style={[globalStyles.regularText ,styles.description]}>{post?.attributes?.description}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  image: {
    width: windowWidth,
    height: 300,
  },
  title: {
    marginTop: 20,
    textAlign: "center",
  },
  description: {
    marginHorizontal: 20
  }
});

export default PostDetailsScreen;