import PropTypes from 'prop-types'

import {getAlias} from '../../lib/utils/format'
import {jwennTeks} from '../../lib/oki-api'

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

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

export default function SlugTeks({hasError, errorMessage, parole, slug}) {
  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 : getAlias(parole.attributes.artistes, parole.attributes.prioriteArtistes)
  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.data.attributes.formats.large
    }

    if (couverture.data.attributes && couverture.data.attributes.formats && couverture.data.attributes.formats.medium) {
      return couverture.data.attributes.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 parole={parole.attributes} paroleId={parole.id} slug={slug} />
    </HeadLayout>
  )
}

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

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

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

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

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