import Head from "next/head";
import styles from "../styles/Home.module.css";
import { Toolbar } from "../components/toolbar";
import imageUrlBuilder from "@sanity/image-url";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";

export default function Home({ posts, authors }) {
  const router = useRouter();
  const [mappedPosts, setMappedPosts] = useState([]);
  const [mappedAuthors, setMappedAuthors] = useState([]);
  console.log(mappedAuthors);
  console.log("mappedPosts: ", mappedPosts);

  useEffect(() => {
    if (posts.length && authors.length) {
      const imgBuilder = imageUrlBuilder({
        projectId: "9w4ss8xn",
        dataset: "production",
      });

      setMappedPosts(
        posts.map((p) => {
          return {
            ...p,
            mainImage: imgBuilder.image(p.mainImage).width(500).height(250),
          };
        })
      );
      setMappedAuthors(
        authors.map((a) => {
          return {
            ...a,
            image: imgBuilder.image(a.image).width(100).height(100),
          };
        })
      );
    } else {
      setMappedPosts([]);
    }
  }, [posts, authors]);

  return (
    <div>
      <Toolbar />
      <div className={styles.main}>
        <h1>Welcome To My Blog</h1>

        <h3>Recent Posts:</h3>

        <div className={styles.feed}>
          {mappedPosts.length ? (
            mappedPosts.map((p, index) => (
              <div key={index} className={styles.post}>
                <div
                  onClick={() => router.push(`/post/${p.slug.current}`)}
                  key={index}
                  className={styles.post}
                >
                  <h3>{p.title}</h3>
                  <img className={styles.mainImage} src={p.mainImage} />
                </div>
                {mappedAuthors
                  .filter((a) => a._id === p.author._ref)
                  .map((a, index) => (
                    <div key={index}>
                      <img src={a.image} />
                      <h4>{a.name}</h4>
                    </div>
                  ))}
              </div>
            ))
          ) : (
            <>No Posts Yet</>
          )}
        </div>
      </div>
    </div>
  );
}

export const getServerSideProps = async (pageContext) => {
  const query = encodeURIComponent('*[ _type == "post" ]');
  const qauthors = encodeURIComponent('*[ _type == "author" ]');
  const url = `https://9w4ss8xn.api.sanity.io/v1/data/query/production?query=${query}`;
  const urlauthors = `https://9w4ss8xn.api.sanity.io/v1/data/query/production?query=${qauthors}`;
  const result = await fetch(url).then((res) => res.json());
  const resultauthors = await fetch(urlauthors).then((res) => res.json());

  if (
    !result.result ||
    !result.result.length ||
    !resultauthors.result ||
    !resultauthors.result.length
  ) {
    return {
      props: {
        posts: [],
        authors: [],
      },
    };
  } else {
    return {
      props: {
        posts: result.result,
        authors: resultauthors.result,
      },
    };
  }
};