import { groq } from "next-sanity";
import Link from "next/link";
import Card from "../../components/Card";
import DailyDevArticlesCard from "../../components/DailyDevArticlesCard";
import { sanityClient } from "../../config/Sanity";
import medium from "medium-sdk";

async function getDailyDevArticles() {
  const res = await fetch(`https://dev.to/api/articles?username=ashishpandey`);
  return res.json();
}

async function getData({ search, page = 1 }) {
  let searchQuery = search || "ashish";
  let postsPerPage = parseInt(page * 4);
  const query = groq`
   *[_type == "post" &&  (searchQueries match "${searchQuery}" || title match "${searchQuery}"  || excerpt match "${searchQuery}" )  ][0..${postsPerPage}] | order(_createdAt desc) {
    categories,excerpt,mainImage,slug,title,_createdAt,_id,imageSubtitle,imageTitle,
    author->{
      name,image
    }
   
  }
  `;
  const posts = await sanityClient.fetch(query);

  let postslength = posts.length;
  let disabled =
    Number.isInteger(Number(postslength / 5)) && postslength != 0
      ? false
      : true;
  return {
    posts,
    disabled,
  };
}

export default async function BlogPage({ searchParams }) {
  const { posts, disabled } = await getData(searchParams);
  const dailyDevArticlesRes = await getDailyDevArticles();

  const dailyArticles = await Promise.all(dailyDevArticlesRes);
  const page = parseInt(searchParams.page) || 1;
  const query = searchParams.search;
  return (
    <main className="overflow-hidden">
      <div className="p-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 xxl:grid-cols-3 gap-5">
        {posts?.map((item, i) => {
          return <Card data={item} />;
        })}
      </div>
      <div className="flex justify-center items-center">
        <Link
          href={`/blogs?page=${page + 1}&search=${query ? query : ""}`}
          disabled={disabled}
          className="relative inline-flex items-center justify-center px-10 py-4 overflow-hidden font-mono font-medium tracking-tighter text-white bg-gray-800 rounded-lg group"
        >
          <span className="absolute w-0 h-0 transition-all duration-500 ease-out bg-green-500 rounded-full group-hover:w-56 group-hover:h-56"></span>
          <span className="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-30 bg-gradient-to-b from-transparent via-transparent to-gray-700"></span>
          <span className="relative">
            {disabled ? "No more Posts" : "Load more"}
          </span>
        </Link>
      </div>
      <div className="p-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 xxl:grid-cols-3 gap-5">
        {dailyArticles?.map((item, i) => {
          return <DailyDevArticlesCard data={item} />;
        })}
      </div>
    </main>
  );
}