import ImageListItem from "@mui/material/ImageListItem";
import { StyledEngineProvider } from "@mui/material/styles";
import "./quiltedImageList.css";
import { Box, Grid, Skeleton } from "@mui/material";
import api from "../../api/axios";
import { useEffect, useState } from "react";
import { UserProfile } from "../../types/UserProfile";
import { useNavigate } from "react-router-dom";

export default function StandardImageList({ user }: { user: UserProfile }) {
  const navigate = useNavigate();
  const [images, setImages] = useState<
    { imageUrl: string; id: string; description: string; createdAt: string }[]
  >([]);

  useEffect(() => {
    if (user.username != undefined) {
      fetchUserPosts().then(console.log);
      return;
    }
  }, [user.username]);

  const fetchUserPosts = async () => {
    try {
      const response = await api.get(`/posts/getUserPosts/${user.username}`);
      const posts = response.data.posts;
      const fetchedImages = await Promise.all(
        posts.map(
          async (post: {
            id: string;
            description: string;
            createdAt: string;
          }) => {
            try {
              const response = await api.get(
                `/posts/getPost/{postId}?postId=${post.id}`
              );
              if (response.data && response.data.images.length > 0) {
                console.log(response.data);
                return {
                  imageUrl: response.data.images[0].url,
                  id: post.id,
                  description: post.description || "",
                  createdAt: post.createdAt,
                };
              }
            } catch (error) {
              console.error("Error fetching post images:", error);
            }
          }
        )
      );
      console.log("Fetched images:", fetchedImages);
      setImages(fetchedImages.filter((image) => image !== undefined));
    } catch (error) {
      console.error("Error fetching user posts:", error);
    }
  };

  return (
    <StyledEngineProvider injectFirst>
      <Box className="box">
        <Grid container spacing={1} className="image-list">
          {images.map((item, index) => {
            return (
              <ImageListItem key={index}>
                {item.imageUrl ? (
                  <img
                    src={item.imageUrl}
                    alt={item.description}
                    onClick={
                      () => navigate("/feed")
                      // anchor to post that was clicked
                    }
                    loading="lazy"
                  />
                ) : (
                  <Skeleton variant="rectangular" width={210} height={118} />
                )}
              </ImageListItem>
            );
          })}
        </Grid>
      </Box>
    </StyledEngineProvider>
  );
}