import Seperator from "@components/Seperator";
import SeperatorInner from "@components/SeperatorInner";
import { CategoryBySlug, ProjectsByCategorySlug } from "@lib/data";
import type { Metadata } from "next";
import Image from "next/legacy/image";
import Link from "next/link";

const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#333" offset="20%" />
      <stop stop-color="#222" offset="50%" />
      <stop stop-color="#333" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#333" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>`;

const toBase64 = (str: string) =>
  typeof window === "undefined"
    ? Buffer.from(str).toString("base64")
    : window.btoa(str);

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const pageTitle = params.slug.split("-").join(" ");

  return {
    title: pageTitle,
    description: pageTitle,
    keywords: pageTitle,
  };
}

const Projects = async ({ params }: { params: { slug: string } }) => {
  const category = await CategoryBySlug(params.slug);
  const projects = await ProjectsByCategorySlug(params.slug);

  const defaultAltText = "Image Description";

  return (
    <>
      <Seperator />
      <section>
        <div className="content-fluid">
          {category.data.title && (
            <>
              <div className="flex justify-center">
                <h2 className="section-header gradient">
                  <span className="z-index-1">{category.data.title}</span>
                </h2>
              </div>
              <SeperatorInner />
            </>
          )}

          {category.data.description && (
            <p className="text-center">{category.data.description}</p>
          )}

          <Seperator />
          {projects.status !== "error" && (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
              {projects.data.map((project: any, index: number) => {
                if (project.slug) {
                  return (
                    <Link
                      key={index}
                      href={`/project/${project.slug}`}
                      className="project-wrapper-two"
                    >
                      <div className="project-overlay-two"></div>
                      <div className="project-content-two">
                        {project.title && (
                          <h3 className="title">{project.title}</h3>
                        )}
                        <div className="discover">Discover</div>
                      </div>
                      {project.image && (
                        <Image
                          priority={false}
                          blurDataURL={`data:image/svg+xml;base64,${toBase64(
                            shimmer(700, 475)
                          )}`}
                          placeholder="blur"
                          className="object-cover absolute project-image-two"
                          src={project.image}
                          layout="fill"
                          sizes="50vw"
                          alt={project.imageDescription || defaultAltText}
                        />
                      )}
                    </Link>
                  );
                }
              })}
            </div>
          )}
        </div>
      </section>
    </>
  );
};

export default Projects;