import React from "react";
import { View, Text } from "react-native";
import { getPost, getPosts, Post } from "../util/api";
import { PostView } from "./PostView";
import { style } from "../util/style";
import { SafeAreaView } from "react-native";
import { VirtualizedList } from "react-native";

type ItemData = {
  id: string;
  title: string;
};

type ItemProps = {
  title: string;
};

const Item = ({title}: ItemProps): JSX.Element => (
  <View style={style.postView}>
    <Text style={style.postFont}>{title}</Text>
  </View>
);

export function PostsContainer(): JSX.Element {
  // const [posts, setPosts] = React.useState<Post[]>([]);

  // React.useEffect(() => {
  //   refreshPosts();
  // }, []);

  const getItemCount = (_data: unknown): number => 50;

  // function refreshPosts(): void {
  //   async function fetchPosts(): Promise<void> {
  //     const posts = await getPosts();
  //     setPosts(posts);
  //   }
  //   fetchPosts();
  // }

  // function getItemCount(): number {
  //   return posts.length;
  // }

  const getItem = (_data: unknown, index: number): ItemData => ({
    id: Math.random().toString(12).substring(0),
    title: `Item ${index + 1}`,
  });

  // const getItem = async (data: any, index: number): Promise<Post> => {
  //   const p = await getPost(index);
  //   return p;
  // };

  return (
    <SafeAreaView style={style.postsContainer}>
      <VirtualizedList
        initialNumToRender={4}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={(item: ItemData) => item.id}
        getItemCount={getItemCount}
        getItem={getItem}
      />
    </SafeAreaView>
  );
}