import {useState} from 'react'
import PropTypes from 'prop-types'
import Image from 'next/image'
import {Button, Container, Grid, Typography, useMediaQuery, Link} from '@material-ui/core'
import HelpIcon from '@material-ui/icons/Help'
import ChatIcon from '@material-ui/icons/Chat'
import GroupAddIcon from '@material-ui/icons/GroupAdd'
import OndemandVideoIcon from '@material-ui/icons/OndemandVideo'

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

export default function Home({kantiteAwtis, kantiteTeks}) {
  const [handleOpen, setHandleOpen] = useState(false)
  const handleClick = () => {
    setHandleOpen(true)
  }

  const kantite = [
    {id: 1, tit: 'Kantité Tèks', kantite: kantiteTeks, route: '/teks'},
    {id: 2, tit: 'Kantité Awtis', kantite: kantiteAwtis, route: '/awtis?paj&paj=1'}
  ]

  const matches = useMediaQuery('(max-width:600px)')

  return (
    <HeadLayout tab={0}>
      <div style={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <Container align='center'>
          <Image
            alt='Logo #OKi'
            width={192}
            height={110}
            src='/logo-192x110.png'
          />
          <Typography variant='h6' component='h1'>
            Organisation KA Internationale
          </Typography>
        </Container>
        <Container style={{marginTop: '1.5em'}}>
          <Grid container spacing={3}>
            {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} kantite={k.kantite} route={k.route} />)}
          </Grid>
        </Container>
        <Container style={{marginBlock: '1.5em'}} align='center'>
          <Grid container spacing={2}>
            <Grid item xs={12} md={3}>
              <Button
                startIcon={<HelpIcon size='large' style={{fontSize: 40}} />}
                size='small'
                variant='contained'
                color='primary'
                onClick={handleClick}
              >
                <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
                  Guide
                </Typography>
              </Button>
            </Grid>
            <Grid item xs={12} md={3}>
              <Link href='https://pale.o-k-i.net'>
                <Button
                  startIcon={<ChatIcon size='large' style={{fontSize: 40}} />}
                  size='small'
                  variant='contained'
                  color='primary'
                >
                  <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
                    Palé
                  </Typography>
                </Button>
              </Link>
            </Grid>
            <Grid item xs={12} md={3}>
              <Link href='https://gade.o-k-i.net'>
                <Button
                  startIcon={<OndemandVideoIcon size='large' style={{fontSize: 40}} />}
                  size='small'
                  variant='contained'
                  color='primary'
                >
                  <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
                    Gadé
                  </Typography>
                </Button>
              </Link>
            </Grid>
            <Grid item xs={12} md={3}>
              <Link href='https://www.helloasso.com/associations/organisation-ka-internationale/adhesions/adhesion-oki'>
                <Button
                  startIcon={<GroupAddIcon size='large' style={{fontSize: 40}} />}
                  size='small'
                  variant='contained'
                  color='primary'
                >
                  <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
                    Adhérer
                  </Typography>
                </Button>
              </Link>
            </Grid>
          </Grid>
        </Container>
        <Carousel
          isMobile={matches}
          handleOpen={handleOpen}
          setHandleOpen={setHandleOpen}
        />
        <Footer />
      </div>
    </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
    }
  }
}