import PropTypes from 'prop-types'
import Image from 'next/image'
import {Container, Grid, Typography, Button, Box} from '@mui/material'
import GroupIcon from '@mui/icons-material/Group'
import MusicNoteIcon from '@mui/icons-material/MusicNote'
import {Pleroma, Peertube, Paypal} from '@icons-pack/react-simple-icons'
import TelegramIcon from '@mui/icons-material/Telegram'
import TwitterIcon from '@mui/icons-material/Twitter'

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

import okiLogo from '../public/logo-192x110.png'

const TELEGRAM_GROUP = process.env.NEXT_PUBLIC_TELEGRAM_GROUP || 'OrganisationKA'
const TWITTER_USERNAME = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'
const PAYPAL_DONATE_ID = process.env.NEXT_PUBLIC_PAYPAL_ADDRESS || '5Q3KPR79CAZVW'

const REZO = [
  {
    id: 'twitter',
    tit: 'Twitter',
    icon: <TwitterIcon />,
    link: `https://twitter.com/${TWITTER_USERNAME}`
  },
  {
    id: 'telegram',
    tit: 'Telegram',
    icon: <TelegramIcon />,
    link: `https://t.me/${TELEGRAM_GROUP}`
  },
  {
    id: 'mizik',
    tit: 'Mizik',
    icon: <MusicNoteIcon />
  },
  {
    id: 'pale',
    tit: 'Palé',
    icon: <Pleroma />
  },
  {
    id: 'gade',
    tit: 'Gadé',
    icon: <Peertube />
  },
  {
    id: 'mobilize',
    tit: 'Mobilizé',
    icon: <GroupIcon />
  }
]

export default function Home({kantiteAwtis, kantiteTeks}) {
  const kantite = [
    {id: 1, tit: 'Tèks', soutit: 'Texte', kantite: kantiteTeks, route: '/teks'},
    {id: 2, tit: 'Awtis', soutit: 'Artiste', kantite: kantiteAwtis, route: '/awtis?paj&paj=1'}
  ]

  return (
    <HeadLayout tab={0}>
      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <Box sx={{flexGrow: 1, marginTop: 4}}>
          <Container align='center'>
            <Image
              alt='Logo #OKi'
              width={192}
              height={110}
              src={okiLogo}
              placeholder='blur'
              quality={50}
            />
            <Typography variant='h6' component='h1'>
              Organisation KA Internationale
            </Typography>
          </Container>
          <Container style={{marginBlock: '1em'}}>
            <Grid container align='center' spacing={2}>
              <Grid item xs={12}>
                <RezoMenu data={REZO} />
              </Grid>
              <Grid item xs={12}>
                <Button
                  size='small'
                  variant='contained'
                  color='primary'
                  startIcon={<Paypal size={20} />}
                  onClick={() => window.open(`https://www.paypal.com/donate?hosted_button_id=${PAYPAL_DONATE_ID}`, '_blank')}
                >
                  Don
                </Button>

              </Grid>
            </Grid>
          </Container>
          <Container style={{marginBlock: '1em'}}>
            <Grid container spacing={3}>
              {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} soutit={k.soutit} kantite={k.kantite} route={k.route} />)}
            </Grid>
          </Container>
        </Box>
        <Footer />
      </Box>
    </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
    }
  }
}