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 axios from 'axios'
import TouchAppIcon from '@material-ui/icons/TouchApp'

import KatKayLa from '../components/kat-kay-la'
import HeadLayout from '../components/head-layout'
import Carousel from '../components/carousel'

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

  const kombyen = [
    {id: 1, tit: 'Konbyen Awtis', kombyen: konbyenAwtis, route: '/awtis?paj&paj=1'},
    {id: 2, tit: 'Konbyen Tèks', kombyen: konbyenTeks, route: '/teks'}
  ]

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

  return (
    <HeadLayout tab={0}>
      <Container align='center'>
        <Image
          alt='Logo #OKi'
          width={400}
          height={215}
          src='/logo.png'
        />
        <Typography variant='h3'>
          Organisation KA Internationale
        </Typography>
        <Typography variant='h4' component='h2' color='textSecondary'>
          Transcriptions et traductions
        </Typography>
        <Typography variant='h5' component='h2'>
          <Link href='mailto:kontak@o-k-i.net'>
            kontak@o-k-i.net
          </Link>
        </Typography>
      </Container>
      <Container style={{marginTop: '5em'}}>
        <Grid container spacing={3}>
          {kombyen.map(k => <KatKayLa key={k.id} tit={k.tit} kombyen={k.kombyen} route={k.route} />)}
        </Grid>
      </Container>
      <Container style={{marginTop: '5em', marginBottom: '5em'}} align='center'>
        <Button
          startIcon={<TouchAppIcon size='large' style={{fontSize: 50}} />}
          size='large'
          variant='contained'
          color='primary'
          onClick={handleClick}
        >
          <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
            Guide
          </Typography>
        </Button>
      </Container>
      <Carousel
        isMobile={matches}
        handleOpen={handleOpen}
        setHandleOpen={setHandleOpen}
      />
    </HeadLayout>
  )
}

Home.propTypes = {
  konbyenAwtis: PropTypes.number.isRequired,
  konbyenTeks: PropTypes.number.isRequired
}

export async function getServerSideProps() {
  const awtisResponse = await axios.get(`${process.env.API_URL}/awtis/count`)
  const mizikResponse = await axios.get(`${process.env.API_URL}/mizik/count`)
  const konbyenAwtis = awtisResponse.data
  const konbyenTeks = mizikResponse.data

  return {
    props: {
      konbyenAwtis,
      konbyenTeks
    }
  }
}