import PropTypes from 'prop-types'

import {jwennTeksEpiSlug, jwennTeks} from '../../lib/oki-api'

import TeksDrawer from '../../components/teks/teks-drawer'
import HeadLayout from '../../components/head-layout'

const jwennAwtis = awtis => {
  return awtis.map(a => a.alias).join(', ')
}

export default function SlugTeks({teks, anTeks, slug}) {
  const awtis = anTeks.awtis.length === 1 ? anTeks.awtis[0].alias : jwennAwtis(anTeks.awtis)
  const {kouveti} = anTeks
  const formatKouveti = () => {
    if (!kouveti) {
      return null
    }

    if (kouveti && kouveti.formats && kouveti.formats.small) {
      return kouveti.formats.small
    }

    if (kouveti && kouveti.formats && kouveti.formats.medium) {
      return kouveti.formats.medium
    }

    if (kouveti && kouveti.formats && kouveti.formats.large) {
      return kouveti.formats.large
    }

    return kouveti
  }

  return (
    <HeadLayout
      imageUrl={formatKouveti() ? formatKouveti().url : null}
      imageWidth={formatKouveti() ? formatKouveti().width : null}
      imageHeight={formatKouveti() ? formatKouveti().height : null}
      imageMime={formatKouveti() ? formatKouveti().mime : null}
      title={`${awtis} - ${anTeks.tit}`} tab={2} slug={`teks/${slug}`}
    >
      <TeksDrawer teks={teks} anTeks={anTeks} />
    </HeadLayout>
  )
}

export async function getServerSideProps({query}) {
  const {slug} = query
  const teks = await jwennTeks()
  const anTeks = await jwennTeksEpiSlug(slug)

  if (!anTeks) {
    throw new Error('San répons')
  }

  return {
    props: {
      teks,
      anTeks,
      slug
    }
  }
}

SlugTeks.propTypes = {
  teks: PropTypes.array.isRequired,
  anTeks: PropTypes.object.isRequired,
  slug: PropTypes.string.isRequired
}