import PropTypes from 'prop-types'

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

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

import Custom500 from '../500'
import Custom404 from '../404'

const jwennAwtis = awtis => {
  const alias = awtis.map(({alias}) => alias)
  return new Intl.ListFormat('fr').format(alias)
}

export default function SlugTeks({hasError, errorMessage, teks, anTeks, slug, komante}) {
  if (hasError) {
    console.log('⚠️ error :', errorMessage)
    return <Custom500 />
  }

  if (!anTeks) {
    return <Custom404 />
  }

  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.large) {
      return kouveti.formats.large
    }

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

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

    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} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`}
    >
      <TeksDrawer teks={teks} anTeks={anTeks} komante={komante} />
    </HeadLayout>
  )
}

export async function getServerSideProps({query}) {
  const {slug} = query
  let teks
  let anTeks
  let hasError
  let errorMessage
  let komante

  try {
    teks = await jwennTeks()
    anTeks = await jwennTeksEpiSlug(slug)
    komante = await jwennKomanteEpiTeksId(anTeks?.id)
  } catch (error) {
    errorMessage = error
    hasError = true
  }

  return {
    props: {
      hasError: hasError || null,
      errorMessage: errorMessage ? errorMessage.message : null,
      teks: teks || null,
      anTeks: anTeks || null,
      slug,
      komante: komante || null
    }
  }
}

SlugTeks.defaultProps = {
  hasError: null,
  errorMessage: null,
  teks: null,
  anTeks: null,
  komante: null
}

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