import type { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next'

import { getGlobalFields } from '@/lib/api/globals'
import { getAllProjectSlugs, getProjectBySlug } from '@/lib/api/projects'
import { nodesFromEdges } from '@/lib/utilities'
import { getImageAverageColor } from '@/lib/color'

import SingleTemplate from '@/components/templates/Single'

export default function Project({ page, nextProject }: InferGetStaticPropsType<typeof getStaticProps>) {
  return <SingleTemplate postType="project" page={page} nextPage={nextProject} />
}

export const getStaticProps: GetStaticProps = async ({ params, preview = false }) => {
  const { globals } = await getGlobalFields(preview)

  try {
    const { page, projects } = await getProjectBySlug(`${params?.slug}`)

    if (!page) throw new Error('Does not exist.')

    const allProjects = nodesFromEdges(projects?.edges)

    const currentProjectIndex = allProjects.findIndex(node => node.id === page.id)
    const nextProject =
      allProjects.length === currentProjectIndex + 1 ? allProjects[0] : allProjects[currentProjectIndex + 1]

    const nextProjectImageAverageColor = await getImageAverageColor(nextProject?.featuredImage?.node?.imageUrl)

    return {
      props: {
        key: page.id,
        globals,
        page,
        nextProject: {
          ...nextProject,
          averageColor: nextProjectImageAverageColor,
        },
        preview,
      },
      revalidate: 10,
    }
  } catch (error) {
    console.error(error)

    return {
      props: {
        globals,
        preview,
      },
      notFound: true,
      revalidate: 10,
    }
  }
}

export const getStaticPaths: GetStaticPaths = async () => {
  const projects = await getAllProjectSlugs()

  return {
    paths: projects.map(node => ({ params: { slug: node.slug } })) || [],
    fallback: 'blocking',
  }
}