---
import ImageCarousel from "@components/ImageCarousel.astro";
import MainLayout from "@layouts/MainLayout.astro";

import TextLink from "@components/TextLink.astro";

import { Icon } from "astro-icon/components";
import { getCollection, render } from "astro:content";

import {
  getAllProjectImages,
  getFullExternalURLOfImage,
  getProjectHero,
  slugify
} from "@lib/utils";

export async function getStaticPaths() {
  const projects = await getCollection("projects", ({ body }) => {
    return body && body.trim().length > 0;
  });

  return projects.map((project) => ({
    params: {
      type: slugify(project.data.type),
      slug: slugify(project.data.slug)
    },
    props: { project }
  }));
}

const { project } = Astro.props;
const { Content } = await render(project);

const images = getAllProjectImages(project);
const hero = getProjectHero(project);

const seoImage: SiteImage = {
  externalURL: await getFullExternalURLOfImage(hero),
  src: hero.src,
  alt: project.data.images.hero.alt,
  width: hero.width,
  height: hero.height
};

import A from "@components/MDX/A.astro";
import Blockquote from "@components/MDX/Blockquote.astro";
import CodeSnippet from "@components/MDX/CodeSnippet.astro";
import H1 from "@components/MDX/H1.astro";
import H2 from "@components/MDX/H2.astro";
import H3 from "@components/MDX/H3.astro";
import H4 from "@components/MDX/H4.astro";
import H5 from "@components/MDX/H5.astro";
import H6 from "@components/MDX/H6.astro";
import IMG from "@components/MDX/IMG.astro";
import LI from "@components/MDX/LI.astro";
import P from "@components/MDX/P.astro";
---

<MainLayout
  title={project.data.title}
  description={project.data.description}
  image={seoImage}
>
  <div class="w-full">
    <section id="title" class="text-white">
      <div class="flex h-100 w-full items-center justify-center">
        <ImageCarousel
          images={images}
          class="h-full w-full"
          foreground={true}
          interval={2000}
          transitionDuration="duration-1000"
          quality={70}
          height={400}
          shuffle={true}
          ><div
            class="absolute inset-0 flex h-full w-full items-center justify-center px-8 text-center"
          >
            <div class="block space-y-4">
              <h1
                class="font-header text-4xl uppercase text-shadow-lg/75 md:text-6xl"
              >
                {project.data.title}
              </h1>
              <div class="text-lg font-bold md:text-xl">
                <span>{project.data.role}</span> | <span
                  >{project.data.type}</span
                >
              </div>
              {
                project.data.keyFigure && project.data.keyFigure.length > 0 && (
                  <div class="text-md mt-8">
                    {project.data.keyFigure.map((figure) => {
                      return (
                        <div>
                          <span class="font-bold">{figure.title}:</span>
                          <span>
                            {figure.href && (
                              <TextLink href={figure.href}>
                                {figure.name}
                              </TextLink>
                            )}
                            {!figure.href && figure.name}
                          </span>
                        </div>
                      );
                    })}
                  </div>
                )
              }
              {
                project.data.externalLinks !== undefined && (
                  <span class="relative order-3 mx-auto flex w-full items-center justify-center space-x-4 text-4xl">
                    {project.data.externalLinks.map((link) => (
                      <TextLink
                        href={link.href}
                        includeExternalLinkIcon={false}
                        aria-label={link.name}
                      >
                        <Icon
                          name={link.icon}
                          class="text-white transition hover:text-gray-300"
                        />
                      </TextLink>
                    ))}
                  </span>
                )
              }
            </div>
          </div></ImageCarousel
        >
      </div>
    </section>
    <section id="projects" class="bg-white dark:bg-gray-950">
      <div class="mx-auto max-w-4xl px-8 py-16 text-justify md:text-left">
        <Content
          components={{
            p: P,
            a: A,
            h1: H1,
            h2: H2,
            h3: H3,
            h4: H4,
            h5: H5,
            h6: H6,
            blockquote: Blockquote,
            pre: CodeSnippet,
            img: IMG,
            li: LI
          }}
        />
      </div>
    </section>
  </div>
</MainLayout>
