import { Box, Heading } from '@chakra-ui/react'

export const getStaticPaths = async () => {
  const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/pages`)
  url.searchParams.append('fields[]', 'slug')
  url.searchParams.append('limit', -1)
  const res = await fetch(url.toString())

  const { data: pages } = await res.json()

  return {
    paths: pages.map((p) => ({ params: { slug: p.slug } })),
    fallback: false, // false or "blocking"
  }
}

export const getStaticProps = async ({ params: { slug } }) => {
  const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/pages`)
  url.searchParams.append('fields[]', 'title')
  url.searchParams.append('fields[]', 'content')
  url.searchParams.append('limit', 1)
  url.searchParams.append('filter', JSON.stringify({ slug: { _eq: slug } }))
  const res = await fetch(url.toString())

  const {
    data: [page],
  } = await res.json()

  return { props: page }
}

export default function Page(page) {
  return (
    <Box className="page">
      <Heading>{page.title}</Heading>
      <div dangerouslySetInnerHTML={{ __html: page.content }}></div>
    </Box>
  )
}