import PropTypes from 'prop-types'
import {Container, Grid} from '@material-ui/core'

import {jwennAwtisKantite, jwennAwtisPajinasyon} from '../lib/oki-api'

import Navigasyon from '../components/navigasyon'
import AwtisKat from '../components/awtis/awtis-kat'
import Pajinasyon from '../components/awtis/pajinasyon'

const AWTIS_POU_CHAK_PAJ = process.env.NEXT_PUBLIC_AWTIS_POU_CHAK_PAJ || 6

export default function Awtis({pajTotal, awtisPouChakPaj, paj}) {
  return (
    <>
      <Navigasyon selectedTab={1} />
      <Pajinasyon pajTotal={pajTotal} paj={paj} />
      <Container>
        <Grid container spacing={4}>
          {awtisPouChakPaj.map(anAwtis => <AwtisKat key={anAwtis._id} anAwtis={anAwtis} />)}
        </Grid>
      </Container>
    </>
  )
}

Awtis.propTypes = {
  pajTotal: PropTypes.number.isRequired,
  awtisPouChakPaj: PropTypes.array.isRequired,
  paj: PropTypes.number.isRequired
}

export async function getServerSideProps({query}) {
  const {paj} = query

  const pajParsed = Number.parseInt(paj[1] || paj, 10)
  const awtisPouChakPaj = await jwennAwtisPajinasyon(pajParsed)
  const awtisCountRequest = await jwennAwtisKantite()
  const awtisCount = Number.parseInt(awtisCountRequest, 10)
  const pajTotal = Math.ceil(awtisCount / AWTIS_POU_CHAK_PAJ)

  if (pajParsed > pajTotal) {
    throw new Error('Pa twouvé paj-la')
  }

  return {
    props: {
      pajTotal,
      awtisPouChakPaj,
      paj: pajParsed
    }
  }
}