import {createDirectus, rest, readItems} from '@directus/sdk'
import Container from '@mui/material/Container'
import Typography from '@mui/material/Typography'
import {formatKonstitisyon} from '../lib/format.js'

const apiUrl = process.env.DIRECTUS_API_URL
const appTitle = process.env.APP_TITLE

async function getData() {
  if (!apiUrl) {
    throw new Error('DIRECTUS_API_URL is required')
  }

  const client = createDirectus(apiUrl).with(rest())

  try {
    const titres = await client.request(
      readItems('titres', {
        sort: 'numero'
      })
    )

    const articles = await client.request(
      readItems('articles', {
        sort: 'numero'
      })
    )

    if (titres.length === 0 || articles.length === 0) {
      throw new Error('No data')
    }

    const konstitisyon = formatKonstitisyon(titres, articles)

    return konstitisyon
  } catch {
    throw new Error('Failed to fetch data')
  }
}

export default async function Page() {
  const data = await getData()

  console.log('data', data)

  return (
    <Container maxWidth='sm'>
      <Typography component='h1' textAlign='center' variant='h3'>{appTitle.toUpperCase()}</Typography>
    </Container>
  )
}