import PropTypes from 'prop-types'
import Container from '@mui/material/Container'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Divider from '@mui/material/Divider'
import Chip from '@mui/material/Chip'
import Grid from '@mui/material/Grid'
import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown'

import HeadLayout from '../components/head-layout'
import Footer from '../components/footer'
import RezoDialog from '../components/rezo/rezo-dialog'
import {jwennStats} from '../lib/oki-api'

import KatStats from '../components/stats/kat-stats'
import KatKayLa from '../components/kat-kay-la'

import Custom500 from './500'

export default function Home({errorCode, errorMessage, stats}) {
  if (errorCode) {
    console.log('⚠️ error', errorMessage)
    return <Custom500 statusCode={errorCode} />
  }

  const {parolesWithoutTranslation} = stats

  const statsByLang = [
    {
      code: 'fr',
      value: parolesWithoutTranslation.francais,
      emoji: '&#127467;&#127479;'
    },
    {
      code: 'en',
      value: parolesWithoutTranslation.anglais,
      emoji: '&#127468;&#127463;'
    },
    {
      code: 'es',
      value: parolesWithoutTranslation.espagnol,
      emoji: '&#127466;&#127480;'
    },
    {
      code: 'de',
      value: parolesWithoutTranslation.allemand,
      emoji: '&#127465;&#127466;'
    },
    {
      code: 'it',
      value: parolesWithoutTranslation.italien,
      emoji: '&#127470;&#127481;'
    }
  ]

  return (
    <HeadLayout tab={0}>
      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <Box sx={{flexGrow: 1, marginBottom: 3, marginTop: 1}}>
          <Container sx={{marginBottom: 2}} align='center'>
            <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h1'>
              #OKi
            </Typography>
            <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h2'>
              Organisation KA Internationale
            </Typography>
            <Typography sx={{fontStyle: 'italic'}} variant='caption' component='h3'>
              Paroles, traductions et Fediverse
            </Typography>
          </Container>
          <Container align='center'>
            <RezoDialog />
          </Container>
        </Box>
        <Container sx={{flexGrow: 100}}>
          <Divider sx={{marginBottom: 3}}>
            <Chip sx={{fontWeight: 'bold'}} color='primary' icon={<ArrowCircleDownIcon />} label='Statistiques' variant='outlined' />
          </Divider>
          <Grid container spacing={2} sx={{marginBottom: 3}}>
            <KatKayLa tit='Paroles' kantite={stats.countParole} href='/paroles' as='/paroles' />
            <KatKayLa tit='Artistes' kantite={stats.countArtiste} href='/awtis?paj&paj=1' as='/awtis/paj/1' />
          </Grid>
          <Typography marginBottom={2} textAlign='center' sx={{fontWeight: 'bold'}} variant='h6' component='h4'>
            Traductions
          </Typography>
          <Grid container justifyContent='space-between' spacing={2} marginBottom={3}>
            {statsByLang.map(({code, value, emoji}) => (
              <KatStats key={code} emoji={emoji} value={value} total={stats.countParole} />
            ))}
          </Grid>
        </Container>
        <Footer />
      </Box>
    </HeadLayout>
  )
}

export async function getServerSideProps() {
  let stats
  let errorCode
  let errorMessage

  try {
    stats = await jwennStats()
  } catch (error) {
    errorMessage = error.message
    errorCode = true
  }

  return {
    props: {
      errorCode: errorCode || null,
      errorMessage: errorMessage || null,
      stats: stats || null
    }
  }
}

Home.defaultProps = {
  errorCode: null,
  errorMessage: null,
  stats: null
}

Home.propTypes = {
  errorCode: PropTypes.bool,
  errorMessage: PropTypes.string,
  stats: PropTypes.object
}