import React from 'react'
import PropTypes from 'prop-types'
import {flowRight} from 'lodash'

import attachI18n from '../components/hoc/attach-i18n'
import attachSession from '../components/hoc/attach-session'

import Page from '../components/page'
import Meta from '../components/meta'
import Content from '../components/content'
import Container from '../components/container'
import Box from '../components/box'
import Event from '../components/event'

const pastEvents = [
  {name: 'Atelier #6', date: new Date(2017, 4, 18), linkComingSoon: true},
  {name: 'Atelier #5', date: new Date(2017, 3, 18), link: '/static/files/events/synthese_atelier_5.pdf'},
  {name: 'Atelier #4', date: new Date(2017, 2, 9), link: '/static/files/events/synthese_atelier_4.pdf'},
  {name: 'Atelier #3', date: new Date(2017, 1, 9), link: '/static/files/events/synthese_atelier_3.pdf'},
  {name: 'Atelier #2', date: new Date(2016, 10, 3)},
  {name: 'Atelier #1', date: new Date(2016, 9, 6), link: '/static/files/events/synthese_atelier_1.pdf'}
]

const EventsPage = ({t, tReady}) => (
  <Page ready={tReady}>
    {() => (
      <React.Fragment>
        <Meta title={t('title')} />

        <Content clouds>
          <Container>
            <Box>
              <h1>{t('nextEvents')}</h1>
              <div className='empty'>
                {t('noEvents')}
              </div>

              <h1>{t('previousEvents')}</h1>
              <section>
                {pastEvents.map(event => (
                  <div key={event.name}>
                    <Event event={event} />
                  </div>
                ))}
              </section>
            </Box>
          </Container>
        </Content>

        <style jsx>{`
          h1 {
            font-size: 1.8rem;
            font-weight: 500;
            margin-bottom: 1em;
          }

          .empty {
            margin-bottom: 3em;
          }

          section {
            display: flex;
            flex-wrap: wrap;
            margin: 1em -0.6em 0 -0.6em;

            div {
              margin: 0 0.6em 1em 0.6em;
              width: calc(33.33% - 1.2em);

              @media (max-width: 960px) {
                width: calc(50% - 1.2em);
              }

              @media (max-width: 767px) {
                width: calc(100% - 1.2em);
              }

              @media (max-width: 551px) {
                height: auto;
              }
            }
          }
        `}</style>
      </React.Fragment>
    )}
  </Page>
)

EventsPage.propTypes = {
  t: PropTypes.func.isRequired,
  tReady: PropTypes.bool.isRequired
}

export default flowRight(
  attachI18n('events'),
  attachSession
)(EventsPage)

@@ -450,16 +450,169 @@
 event'%0A%0A
+const nextEvent = %7B%0A  name: 'Atelier #9',%0A  date: new Date(2018, 6, 12),%0A  subscribe: 'https://www.eventbrite.fr/e/billets-atelier-geo-8-46883052472'%0A%7D%0A%0A
 const pa
@@ -643,17 +643,17 @@
 telier #
-6
+8
 ', date:
@@ -669,39 +669,124 @@
 (201
-7
+8
 , 4, 
-18), linkComingSoon: true
+22)%7D,%0A  %7Bname: 'Atelier #7', date: new Date(2017, 11, 12)%7D,%0A  %7Bname: 'Atelier #6', date: new Date(2017, 4, 18)
 %7D,%0A 
@@ -1556,16 +1556,58 @@
        %7B
+nextEvent ? %3CEvent event=%7BnextEvent%7D /%3E : 
 t('noEve

Update events