import * as React from "react"
import { graphql } from "gatsby"
import groupBy from "lodash/fp/groupBy"
import join from "lodash/fp/join"
import sortBy from "lodash/fp/sortBy"
import { Badge, BaseStyles } from "theme-ui"

import Layout from "../components/layout"
import SEO from "../components/seo"
import ContributeMessage from "../components/ContributeMessage"

const WEEKDAYS = ["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"]

const HD = () => {
  return <Badge>HD</Badge>
}

const Masses = ({ masses }) => {
  return sortBy("nom")(masses).map((m) => {
    return (
      <tr key={m.id}>
        <td>
          {m.nom} {m.is_hd && <HD />}
          {m.communaute && (
            <>
              <br />
              <em>{m.communaute}</em>
            </>
          )}
          {m.forme === "Extraordinaire" && (
            <>
              <br />
              <em>Forme extraordinaire</em>
            </>
          )}
        </td>
        <td>{m.dimanche}</td>
        <td>
          {join(", ")(
            WEEKDAYS.reduce((acc, current) => {
              if (!m[current]) {
                return acc
              }
              return [...acc, `${current} ${m[current]}`]
            }, [])
          )}
        </td>
        <td>
          {m.youtube && (
            <a
              href={m.youtube}
              target="_blank"
              style={{ marginRight: 6 }}
              rel="noopener noreferrer"
            >
              Youtube
            </a>
          )}
          {m.facebook && (
            <a
              href={m.facebook}
              target="_blank"
              style={{ marginRight: 6 }}
              rel="noopener noreferrer"
            >
              Facebook
            </a>
          )}
          {m.site && (
            <a href={m.site} target="_blank" rel="noopener noreferrer">
              Site
            </a>
          )}
        </td>
      </tr>
    )
  })
}

const RowHeader = () => {
  return (
    <thead>
      <tr>
        <th scope="col" width="30%">
          Nom
        </th>
        <th scope="col">Dimanche</th>
        <th scope="col">Semaine</th>
        <th scope="col">Lien</th>
      </tr>
    </thead>
  )
}

const IndexPage = ({ data }) => {
  const { allDataYaml } = data
  const messes = allDataYaml.nodes[0].messes

  return (
    <Layout>
      <BaseStyles>
        <SEO title="Messes et offices" />
        <h1>Messes et offices en ligne</h1>
        <ContributeMessage />
        <p>
          Pour bien suivre la messe (notamment avec des enfants), consultez la{" "}
          <a href="/">page d'accueil</a>.
        </p>
        <h3>
          Haute qualité <HD />
        </h3>
        <p>
          Nous avons créé un indicateur pour les messes filmées en « haute
          qualité », pour lesquelles nous avons créé trois critères :
          l'enregistrement en haute définition, le son continu et de très bonne
          qualité, le changement de prise de vue pendant la messe.
        </p>
        <h2>Liste des messes</h2>
        <table>
          <RowHeader />
          <tbody>
            {Object.entries(groupBy("groupe")(messes)).map(
              ([groupe, masses]) => {
                return (
                  <React.Fragment key={groupe}>
                    <tr>
                      {!!groupe && (
                        <td colSpan="4">
                          <h3>{groupe}</h3>
                        </td>
                      )}
                    </tr>
                    <Masses masses={masses} />
                  </React.Fragment>
                )
              }
            )}
          </tbody>
        </table>
        <h2>Autres listes</h2>
        <p>Vous trouverez d'autres listes ici :</p>
        <ul>
          <li>
            <a href="https://messes.info/">Messes Info</a> qui propose une
            recherche spéciale pour la{" "}
            <a href="https://messes.info/horaires/semaineste">Semaine Sainte</a>{" "}
            ainsi que les horaires d’offices de la liturgie des heures
            retransmis en direct.
          </li>
          <li>
            <a href="http://bougetoneglise.fr/recherche/live/">
              Bouge ton Église
            </a>
          </li>
        </ul>
        <p>
          Nous remercions tout particulièrement le groupe Messes en direct pour
          la mise à disposition initiale des horaires des messes.
        </p>
      </BaseStyles>
    </Layout>
  )
}

export default IndexPage

export const pageQuery = graphql`
  query {
    allDataYaml {
      nodes {
        messes {
          id
          groupe
          nom
          communaute
          forme
          lundi
          mardi
          mercredi
          jeudi
          vendredi
          samedi
          dimanche
          youtube
          facebook
          site
          is_hd
        }
      }
    }
  }
`