import PropTypes from 'prop-types'
import {Container, Grid, Typography, Box} from '@mui/material'

import KatKayLa from '../components/kat-kay-la'
import HeadLayout from '../components/head-layout'
import Footer from '../components/footer'
import {jwennTeksKantite, jwennAwtisKantite} from '../lib/oki-api'

export default function Home({kantiteAwtis, kantiteTeks}) {
  const kantite = [
    {id: 1, tit: 'Textes', kantite: kantiteTeks, route: '/teks'},
    {id: 2, tit: 'Artistes', kantite: kantiteAwtis, route: '/awtis?paj&paj=1'}
  ]

  return (
    <HeadLayout tab={0}>
      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <Box sx={{flexGrow: 1, marginTop: 1}}>
          <Container align='center'>
            <Typography variant='h6' component='h1'>
              #OKi
            </Typography>
            <Typography variant='h6' component='h2'>
              Organisation KA Internationale
            </Typography>
          </Container>
          <Grid container sx={{flexGrow: 1}} justifyContent='center' spacing={3}>
            {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} soutit={k.soutit} kantite={k.kantite} route={k.route} />)}
          </Grid>
        </Box>
        <Footer />
      </Box>
    </HeadLayout>
  )
}

Home.propTypes = {
  kantiteAwtis: PropTypes.number.isRequired,
  kantiteTeks: PropTypes.number.isRequired
}

export async function getServerSideProps() {
  const awtisResponse = await jwennAwtisKantite()
  const teksResponse = await jwennTeksKantite()
  const kantiteAwtis = awtisResponse
  const kantiteTeks = teksResponse

  return {
    props: {
      kantiteAwtis,
      kantiteTeks
    }
  }
}