import {useState} from 'react'
import {Button, useMediaQuery} from '@material-ui/core'
import axios from 'axios'

import HeadLayout from '../components/head-layout'
import Carousel from '../components/carousel'

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

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

  return (
    <HeadLayout tab={0}>
      <Button onClick={handleClick}>Open carousel</Button>
      <Carousel
        isMobile={matches}
        handleOpen={handleOpen}
        setHandleOpen={setHandleOpen}
      />
    </HeadLayout>
  )
}

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

  return {
    props: {
      mizik,
      awtis
    }
  }
}