import type { GetStaticProps, InferGetStaticPropsType } from 'next'

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

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

export default function projects({
  page,
  featuredImageAverageColor,
  projects,
  filters,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <ListingTemplate
      postType="project"
      featuredItem={{ ...page.featuredProjectHeroSection.featuredProject, averageColor: featuredImageAverageColor }}
      items={projects}
      filters={filters}
    />
  )
}

export const getStaticProps: GetStaticProps = async ({ preview = false }) => {
  const { globals } = await getGlobalFields(preview)
  const { page, projects } = await getProjectsPage()
  const featuredImageAverageColor = await getImageAverageColor(
    page?.featuredProjectHeroSection?.featuredProject?.featuredImage?.node?.imageUrl
  )

  const allProjects = nodesFromEdges(projects?.edges)

  const allTerms = allProjects
    .map(project => {
      return project.terms.edges.map(({ node }: any) => ({ ...node }))
    })
    .flat()
  const uniqueTerms = [...new Map(allTerms.map(x => [JSON.stringify(x), x])).values()]

  const industryFilters = uniqueTerms
    .filter(term => term.taxonomyName === 'product_industry')
    .reduce((results, current) => {
      return {
        key: 'product_industry',
        label: 'Industries',
        options: [
          ...(results?.options ? results.options : []),
          {
            label: current.name,
            value: current.slug,
          },
        ],
      }
    }, {})

  const productFilters = uniqueTerms
    .filter(term => term.taxonomyName === 'product_type')
    .reduce((results, current) => {
      return {
        key: 'product_type',
        label: 'Projects',
        options: [
          ...(results?.options ? results.options : []),
          {
            label: current.name,
            value: current.slug,
          },
        ],
      }
    }, {})

  return {
    props: {
      globals,
      page,
      featuredImageAverageColor,
      projects: allProjects,
      filters: [productFilters, industryFilters],
    },
    revalidate: 10,
  }
}