import type { GetStaticProps, InferGetStaticPropsType } from 'next'

import { getGlobalFields } from '@/lib/api/globals'
import { getCaseStudiesPage } from '@/lib/api/case-studies'
import { nodesFromEdges } from '@/lib/utilities'
import { getImageAverageColor } from '@/lib/color'

import ListingTemplate from '@/components/templates/Listing'

export default function CaseStudies({
  page,
  featuredImageAverageColor,
  caseStudies,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <ListingTemplate
      postType="case_study"
      featuredItem={{
        ...page.featuredCaseStudyHeroSection.featuredCaseStudy,
        averageColor: featuredImageAverageColor,
      }}
      items={caseStudies}
    />
  )
}

export const getStaticProps: GetStaticProps = async ({ preview = false }) => {
  const { globals } = await getGlobalFields(preview)
  const { page, caseStudies } = await getCaseStudiesPage()
  const featuredImageAverageColor = await getImageAverageColor(
    page?.featuredCaseStudyHeroSection?.featuredCaseStudy?.featuredImage?.node?.imageUrl
  )

  const allCaseStudies = nodesFromEdges(caseStudies?.edges)

  return {
    props: {
      globals,
      page,
      featuredImageAverageColor,
      caseStudies: allCaseStudies,
    },
    revalidate: 10,
  }
}