import React from 'react'
import { Link } from 'gatsby'
import Layout from '../components/layout'
import { Family } from '../components/family'
import { setConfig } from 'react-hot-loader'
import { members } from '../members'

setConfig({ pureSFC: true })

const lookupMemberInTime = (name, year) => {
  const [lookupKey] = name.split('2')
  const memberInfo = members[lookupKey]
  const [memberYear] = memberInfo.bornDate.split('-')
  return memberYear <= year ? name : 'backcard'
}
const IndexPage = () => {
  const [year, setYear] = React.useState('2018')
  const lookupMember = name => lookupMemberInTime(name, year)
  return (
    <Layout year={year} setYear={setYear}>
      <Family
        familyName="Western"
        members={[
          lookupMember('nonno'),
          lookupMember('nonna'),
          lookupMember('silvana2'),
          lookupMember('franco2'),
          lookupMember('matteo2'),
          lookupMember('flavia2'),
          lookupMember('daniele'),
        ]}
      />
      <Family
        familyName="Circo"
        members={[
          lookupMember('vittorio'),
          lookupMember('silvana'),
          lookupMember('tommaso'),
          lookupMember('samuele'),
          lookupMember('lorenzo'),
          lookupMember('valerio'),
        ]}
      />
      <Family
        familyName="Hapache"
        members={[
          lookupMember('franco'),
          lookupMember('tiziana'),
          lookupMember('bianca'),
          lookupMember('angelica'),
          'backcard',
          'backcard',
        ]}
      />
      <Family
        familyName="Badabum"
        members={[
          lookupMember('matteo'),
          lookupMember('emma'),
          lookupMember('edoardo'),
          lookupMember('matilde'),
          lookupMember('arianna'),
        ]}
      />
      <Family
        familyName="Ercole"
        members={[
          lookupMember('andrea'),
          lookupMember('flavia'),
          lookupMember('marco'),
          lookupMember('sofia'),
          lookupMember('elisa'),
        ]}
      />
      <Family familyName="???" members={['backcard', 'backcard', 'backcard']} />
      <Family
        familyName="Principi"
        members={[
          lookupMember('tommaso2'),
          lookupMember('samuele2'),
          lookupMember('lorenzo2'),
          lookupMember('edoardo2'),
          lookupMember('marco2'),
          lookupMember('valerio2'),
          'backcard',
          'backcard',
        ]}
      />
      <Family
        familyName="Principesse"
        members={[
          lookupMember('matilde2'),
          lookupMember('sofia2'),
          lookupMember('bianca2'),
          lookupMember('arianna2'),
          lookupMember('angelica2'),
          lookupMember('elisa2'),
          'backcard',
        ]}
      />
      <Link to="/page-2/">Go to page 2</Link>
    </Layout>
  )
}

export default IndexPage

@@ -49,16 +49,176 @@
 gatsby'%0A
+import %7B%0A  closestTo,%0A  format,%0A  setYear,%0A  isBefore,%0A  startOfDay,%0A  addYears,%0A  distanceInWords,%0A%7D from 'date-fns'%0Aimport itLocale from 'date-fns/locale/it'%0A
 import L
@@ -647,191 +647,1300 @@
 nst 
-IndexPage = () =%3E %7B%0A  const %5Byear, setYear%5D = React.useState('2018')%0A  const lookupMember = name =%3E lookupMemberInTime(name, year)%0A  return (%0A    %3CLayout year=%7Byear%7D setYear=%7BsetYear%7D
+today = startOfDay(new Date())%0Aconst currentYear = today.getFullYear()%0Aconst memebersByDate = Object.keys(members).reduce((acc, key) =%3E %7B%0A  const birthday = setYear(members%5Bkey%5D.bornDate, currentYear)%0A  const nextBirthday = format(%0A    isBefore(birthday, today) ? addYears(birthday, 1) : birthday,%0A    'YYYY-MM-DD'%0A  )%0A  if (acc.hasOwnProperty(nextBirthday)) %7B%0A    acc%5BnextBirthday%5D.push(%7B%0A      ...members%5Bkey%5D,%0A      picture: key,%0A    %7D)%0A  %7D else %7B%0A    acc%5BnextBirthday%5D = %5B%0A      %7B%0A        ...members%5Bkey%5D,%0A        picture: key,%0A      %7D,%0A    %5D%0A  %7D%0A  return acc%0A%7D, %7B%7D)%0Aconst nextBirthday = format(%0A  closestTo(%0A    today,%0A    Object.keys(memebersByDate).map(date =%3E %7B%0A      const birthday = setYear(date, currentYear)%0A      return isBefore(birthday, today) ? (birthday, 1) : birthday%0A    %7D)%0A  ),%0A  'YYYY-MM-DD'%0A)%0A%0Aconst IndexPage = () =%3E %7B%0A  const %5Byear, setYear%5D = React.useState('2018')%0A  const lookupMember = name =%3E lookupMemberInTime(name, year)%0A  return (%0A    %3CLayout year=%7Byear%7D setYear=%7BsetYear%7D%3E%0A      %3Cdiv%3E%0A        %3Ch2%3E%0A          Il prossimo compleanno %C3%A8 di%7B' '%7D%0A          %7BmemebersByDate%5BnextBirthday%5D.map(member =%3E member.name).join(' e ')%7D%7B' '%7D%0A          %7BdistanceInWords(today, nextBirthday, %7B locale: itLocale, addSuffix: true %7D)%7D%7B' '%7D%0A          %F0%9F%8E%89%F0%9F%8E%89%F0%9F%8E%89%0A        %3C/h2%3E%0A      %3C/div
 %3E%0A  

Add next birthday sentence