import PropTypes from 'prop-types'
import {Container, Typography, Box, Divider, Chip} from '@mui/material'
import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown'
import {createTheme, ThemeProvider} from '@mui/material/styles'

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

const theme = createTheme({
  components: {
    MuiDivider: {
      styleOverrides: {
        root: {
          color: 'black',
        }
      }
    }
  }
})

export default function Home({teks}) {
  return (
    <HeadLayout tab={0}>
      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <Box sx={{flexGrow: 1, marginBottom: 4}}>
          <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>
          <ThemeProvider theme={theme}>
            <Divider variant='middle' sx={{marginBottom: 1}}>
              <Chip icon={<ArrowCircleDownIcon />} label='Derniers textes publiés ' variant='outlined' />
            </Divider>
          </ThemeProvider>
          <DenyeTeks {...teks} />
        </Container>
        <Footer />
      </Box>
    </HeadLayout>
  )
}

export async function getServerSideProps() {
  const denyeTeks = await jwennDenyeTeks()

  return {
    props: {
      teks: denyeTeks
    }
  }
}

Home.propTypes = {
  teks: PropTypes.array.isRequired
}