import PropTypes from 'prop-types'

import {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 = artiste => {
  const alias = artiste.data.map(({attributes}) => attributes.alias)
  return new Intl.ListFormat('fr').format(alias)
}

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

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

  const artistes = parole.attributes.artistes.length === 1 ? parole.attributes.artistes[0].data.attributes.alias : jwennAwtis(parole.attributes.artistes)
  const {couverture} = parole.attributes
  const formatKouveti = () => {
    if (!couverture?.data?.attributes) {
      return null
    }

    if (couverture.data.attributes && couverture.data.attributes.formats && couverture.data.attributes.formats.large) {
      return couverture.formats.large
    }

    if (couverture.data.attributes && couverture.data.attributes.formats && couverture.data.attributes.formats.medium) {
      return couverture.formats.medium
    }

    if (couverture.data.attributes && couverture.data.attributes.formats && couverture.data.attributes.formats.small) {
      return couverture.data.attributes.formats.small
    }

    return couverture.data.attributes
  }

  return (
    <HeadLayout
      imageUrl={formatKouveti() ? formatKouveti().url : null}
      imageWidth={formatKouveti() ? formatKouveti().width : null}
      imageHeight={formatKouveti() ? formatKouveti().height : null}
      imageMime={formatKouveti() ? formatKouveti().mime : null}
      title={`${artistes} - ${parole.attributes.titre} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`}
    >
      <TeksDrawer paroles={paroles} parole={parole.attributes} paroleId={parole.id} commentaires={commentaires} />
    </HeadLayout>
  )
}

export async function getServerSideProps({query}) {
  const {slug} = query
  let paroles
  let parole
  let hasError
  let errorMessage
  let commentaires

  try {
    paroles = await jwennTeks()
    parole = paroles.find(({attributes}) => attributes.slug === slug)
    commentaires = paroles.map(({attributes}) => attributes.commentaires)
    commentaires = await jwennKomanteEpiTeksId(parole?.id)
  } catch (error) {
    errorMessage = error
    hasError = true
  }

  return {
    props: {
      hasError: hasError || null,
      errorMessage: errorMessage ? errorMessage.message : null,
      paroles: paroles || null,
      parole: parole || null,
      slug,
      commentaires: commentaires || null
    }
  }
}

SlugTeks.defaultProps = {
  hasError: null,
  errorMessage: null,
  paroles: null,
  parole: null,
  commentaires: null
}

SlugTeks.propTypes = {
  hasError: PropTypes.bool,
  errorMessage: PropTypes.string,
  paroles: PropTypes.array,
  parole: PropTypes.object,
  slug: PropTypes.string.isRequired,
  commentaires: PropTypes.array
}