import { translate } from '@edgeandnode/gds'
import { buildDynamicMDX } from 'nextra/remote'

import { supportedLocales, translations } from '@/i18n'
import { getSupportedNetworks } from '@/supportedNetworks'
import NetworkDetailsPage from '@/supportedNetworks/NetworkDetailsPage'

export const getStaticPaths = async () => {
  const networks = await getSupportedNetworks()
  const paths = []
  for (const locale of supportedLocales) {
    for (const network of networks) {
      paths.push({
        params: { locale, id: network.id },
      })
    }
  }
  return { paths, fallback: false }
}

export const getStaticProps = async ({ params }) => {
  const { locale, id } = params
  if (!locale || !id) {
    return {
      notFound: true,
    }
  }
  const networks = await getSupportedNetworks()
  const network = networks.find((n) => n.id === id)
  if (!network) {
    return {
      notFound: true,
    }
  }
  const rawMdx = `---
title: ${network.fullName}
hideTableOfContents: true
hideContentHeader: true
unwrapContent: true
hideContentFooter: true
parentRouteKey: supported-networks
---`
  const mdx = await buildDynamicMDX(rawMdx, { codeHighlight: false })
  const { pageMap } = await import(`.next/static/chunks/nextra-page-map-${locale}.mjs`)
  return {
    props: {
      ...mdx,
      __nextra_pageMap: pageMap,
      network,
    },
  }
}

<NetworkDetailsPage network={props.network} />
