import React, { useEffect, useState } from "react";
import { Text, Image, StyleSheet } from "react-native";
import { getRequest } from "@request/index";
import { globalStyles } from "@styles/global";
import { windowWidth } from "@utils/Dimensions";
import Layout from "@components/Layout/Layout";
import { useTheme } from "@styles";

const PostDetailsScreen = ({ navigation, route }) => {
  const [post, setPost] = useState({});
  const { colors } = useTheme();

  const fetchPost = async () => {
    const { data } = await getRequest(
      `api/posts/${route.params.id}?populate=*`
    );
    if (data) {
      setPost(data.data);
    }
  };

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

  return (
    <Layout>
      <Image
        style={styles.image}
        source={{
          uri: `https://strapi.dilig.net${post?.attributes?.profileImage.data.attributes.url}`,
        }}
      />
      <Text
        style={[
          globalStyles.boldText,
          styles.title,
          { color: colors.textPrimary },
        ]}
      >
        {post?.attributes?.title}
      </Text>
      <Text
        style={[
          globalStyles.regularText,
          styles.description,
          { color: colors.textPrimary },
        ]}
      >
        {post?.attributes?.description}
      </Text>
    </Layout>
  );
};

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

export default PostDetailsScreen;