import React, { useEffect, useState } from "react";
import { Text, Image, StyleSheet } from "react-native";
import { globalStyles } from "@styles/global";
import { windowWidth } from "@utils/Dimensions";
import Layout from "@components/Layout/Layout";
import { useTheme } from "@styles";
import { useSinglePostQuery } from "@features/posts/postsApiSlice";
import Loader from "@components/Loader";

const PostDetailsScreen = ({ navigation, route }) => {
  const { colors } = useTheme();

  const { data: post, isLoading } = useSinglePostQuery(route.params.id);

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

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

export default PostDetailsScreen;